有谁做过 WYSIWYG 编辑器么？

[thenewbie]

一直认为各种编辑器都是一个 <textarea> 然后今天发现自己大错特错了。

然后一时好奇，就想自己做个编辑器玩，一下午的时间各种 google （找到的有用资料好少...）以及自己各种折腾，但是感觉越折腾越不明白了 - - （给文字加上各种样式啥的到也不难，但是混在一起就混乱了，下载了几个开源的，直接看js代码感觉不同的编辑器具体实现思路也差好多。）

还有各种浏览器兼容问题，头大...

有谁做过这个么？有没有教程，或者任何资料，或者类似个“路线图”样子的一步步指导之类的。
做过 WYSIWYG 编辑器的童鞋，你是怎么一步一步做好的呢？

[panxianhai]

看看开源的。比如kindeditor

[thenewbie]

@panxianhai 还是想问问有没有童鞋做过这个，然后是怎么一步一步弄出来的，思路，直接看代码发现里面都有很多诡异的设定和hack啥的.... 越来越混乱

[chloerei]

ContentEditable

https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla


例子：Simple jQuery WYSIWYG.

http://maccman.github.io/wysiwyg/

[breeswish]

一般两种实现:

1) ContentEditable
2) IFrame

又, 一般为了达到ie兼容, 使用方法2

iframe主要是利用其designmode来实现，具体你搜索iframe designmode就有了；contenteditable是一个属性，具体取值自己看mdn，它是一种轻量级的编辑区域，至于和iframe的功能区别嘛……我不是很了解。

iframe的hack主要集中在cursor处理方面，因为IE和其他浏览器处理方式迥异←_←另外也有一些ExecCommand()上的差异也需要兼容性处理，除此以外其他的兼容性基本都是些很高级功能时候需要 比如处理表格之类

iframe WYSIWYG 专业级别编辑器:
tinymce
fckeditor

轻量级别除了楼上给出的以外也有不少 不过我都没用过 = =

[thenewbie]

@chloerei @breeswish 两位给的信息相当有帮助 ^o^ 灰常感谢～～