开发富文本编辑器的一些体会

最近两周一直都在开发后台wcms系统的文本编辑器。在开发的过程中，感觉到开发富文本编辑器还是能学到不少东西的，接下来我会说说我个人是怎么开发的吧。因为我的编辑器要兼容自己的后台，所以修改了一些浏览器自身的方法。

开发富文本编辑器主要用到了document.execCommand( command, showUI, value )这个方法。

command：要执行的命令的名称 showUI：boolean是否向用户显示命令特定的对话框或消息框 value类型：string要使用该命令分配的值。

关于这个方法更加详细的说明可以google进行搜索。

我们都知道在textarea下我们可以直接输入文本，但是怎么样能显示我们编辑文本后的效果呢。我们通常是在div与iframe中编辑。要想在div中编辑，设置其contentEditable = "true"。若是在iframe中编辑，可以用designMode="on"。通常人们都是用ifame，这样做当然有它的道理。我在这边说下我个人的看法，有不对的希望大家指出。

为什么要用iframe来开发富文本编辑器是基于多方面考虑的。以下是我个人的看法：

1.用iframe可以解决浏览器的兼容性问题。在iframe下可以很方便的获取选中的文字等等。

2.在iframe下编辑可以实现所见即所得的效果。相当于是iframe下显示的是浏览器解析源码后的内容。

3.在iframe下是直接在iframe下的document中进行操作并不会影响到当前文档的document。

说说我在开发中的体会吧， 因为我们的新闻页的源码内容是写在<textarea>innerHTML中，如果要获取源码解析后的内容直接取它的value就行。如果想让<!-- -->这种编码格式也显示的话，需要将<!--和-->解析成&lt;和--gt;。还有就是在iframe中会将<br/>转成<br>，所以在最后上传保存的时候需要将它转成<br/>。

因为在开发过程中需要将源码粘贴到iframe中，因为iframe就是一种所见即所得的编辑器，会自动给你的文本添加标签来展现当前的内容。如果这样的话iframe会给源代码添加上一些自己不需要的标签，为了解决这个问题，我给iframe的document添加了一个paste事件的，在发生粘贴事件的时候在body内建立了一个textarea元素，然后给textarea添加一个focus来将焦点设置在textarea中，这样内容就粘贴在textarea中了。就不会产生我们不需要的内容了。

因为要捕捉浏览器的ctrl+A事件来获取当前全选的文本内容，获取当前iframe全选文字的方法是document.getElementById("iframe").contentWindow.document.getSelection().toString();

我需要修改浏览器自带的tab事件来进行文本的对齐。在这里我用到了inserthtml这个command，即execCommand("inserthtml", false, "")。在打一个tab键的时候给页面添加空格。这里就出现问题了，我得加七个空格才能实现文本的对齐。那怎么解决这个问题呢，后来我查找资料发现了&emsp;它可以代表一个中文全角空格，通过它我解决了这个问题。

当然还有源码和当前文本编辑器互相显示，也就是iframe和textarea相互显示就行了。

就写到这里吧。代码我就不粘贴了，也就是给大家提供思路，欢迎拍砖。