开发WYSIWYG编辑器可能遇到的问题

最近从头开发了一个简单实用的页面可视化编辑器，感觉从中学到了不少东西。功能就是用一个脚本把前端页面的某些块搞成可以编辑的状态。遇到了几个主要的问题，让我印象最深刻。汇总一下吧：

Firefox 3+开始支持contenteditable属性，这让可视化编辑变得简单。想要“可视化”一个节点，只要给它赋上contenteditable属性即可。如果你想让某一个页面上实现简易的在线编辑功能，那么思路就是：

1. 前端页面，通过JavaScript给需要编辑的节点赋上contenteditable属性，为true。注意这里要用o.contentEditable = “true”，用setAttribute在IE下设置不成功。

2. 用js生成一个按钮工具条，包括一些常用的按钮，例如加粗、修改链接等等。用document.execCommand来执行一些常用的命令，但可用的不多，只有createlink, unlink, bold等。需要的话，还是自己写。

3. 需要弹出对话框的指令，例如修改链接，用行内对话框（inline popup）来实现，不用window.open。一来比较方便，二来可以避免某些浏览器把弹窗block掉。

4. 重写innerHTML，也就是写一个getHTMLContent()。因为IE sucks，它的innerHTML会把你的代码搞得非常不规范，标签大写，属性丢失，文本节点、注释节点丢失……重写innerHTML的方法是递归序列化一个DOM节点，遇到ELEMENT节点，写一串ELEMENT字符串，遇到COMMENT节点，写 <!–，挺有意思的。我是参考TinyMCE来搞了一个轻量级的DOM serializer，回头发出来共享。对了，Firefox下，只要简单的innerHTML，就可以了。哦，给我一个不爱Firefox的理由！

5. 重写setHTML。如果仅仅使用o.innerHTML = str，那么IE还是会给你带来麻烦。如果str以注释开头，哦，那你的注释就再也找不到了。还有一些其他的问题，例如把”<p><ul><li></li></ul></p>”在IE下set进一个元素的innerHTML，IE会自作主张地给你搞乱。

总的来说，其实不难，只是用一个contenteditable属性把页面的一块区域搞成WYSIWYG Editing，然后一个实现一个set，一个get，整体思路就是这样，hoho！