WYSIWYG 编辑器的原理

以前写过这篇文章, 几个WYSIWYG编辑. 一致很好奇, 这样的可视化编辑器是如何实现? 功能那么多. 做了一点研究,发现事情并非如有原来所想. WYSIWYG编辑功能其实不是由这些编辑器来实现的,而是由浏览器自己实现, 这些编辑器只是进行了一些封装. (屏蔽不同浏览器的不同实现, 提供工具栏等等.)

• 打开浏览器的编辑模式, 只要将要编辑的文档设置为 document.designMode = “On” .
  访问这里 ,添加启用designMode的书签, 访问页面是点击书签就可以编辑页面了.
• 大部分WYSIWYG 编辑器的功能, 比如自动加入回车自动加入<p>.列表下回车, 新增项目等都是浏览器实现的. 这就解释了为什么几乎所有的编辑器都是同样的行为.
• IE可以实现仅对某一个元素进行编辑.
• IE在designMode 下所有元素都可见 , 也就是 display:none不会有效果. (这个昨天折腾了我一个晚上, 测试页面(当然请用IE打开测试))
• IE 中指定了高度(宽度?)的元素会出现边框, 可以调整大小.

我现在在研究WYMeditor (What You See is What You Mean ), 这个编辑器可以产生质量比较好的代码, 不会插入font 那种垃圾代码, 通过添加className 的方式格式化文本.