这是一个创建于 4249 天前的主题，其中的信息可能已经有所发展或是发生改变。
一直认为各种编辑器都是一个 <textarea> 然后今天发现自己大错特错了。
然后一时好奇，就想自己做个编辑器玩，一下午的时间各种 google （找到的有用资料好少...）以及自己各种折腾，但是感觉越折腾越不明白了 - - （给文字加上各种样式啥的到也不难，但是混在一起就混乱了，下载了几个开源的，直接看js代码感觉不同的编辑器具体实现思路也差好多。）
还有各种浏览器兼容问题，头大...
有谁做过这个么？有没有教程，或者任何资料，或者类似个“路线图”样子的一步步指导之类的。
做过 WYSIWYG 编辑器的童鞋，你是怎么一步一步做好的呢？
然后一时好奇，就想自己做个编辑器玩，一下午的时间各种 google （找到的有用资料好少...）以及自己各种折腾，但是感觉越折腾越不明白了 - - （给文字加上各种样式啥的到也不难，但是混在一起就混乱了，下载了几个开源的，直接看js代码感觉不同的编辑器具体实现思路也差好多。）
还有各种浏览器兼容问题，头大...
有谁做过这个么？有没有教程，或者任何资料，或者类似个“路线图”样子的一步步指导之类的。
做过 WYSIWYG 编辑器的童鞋，你是怎么一步一步做好的呢？
 |
1
panxianhai 2013-05-09 22:01:55 +08:00
看看开源的。比如kindeditor
|
 |
2
thenewbie OP @panxianhai 还是想问问有没有童鞋做过这个，然后是怎么一步一步弄出来的，思路，直接看代码发现里面都有很多诡异的设定和hack啥的.... 越来越混乱
|
 |
3
chloerei 2013-05-09 22:24:34 +08:00  2
ContentEditable
https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla 例子：Simple jQuery WYSIWYG. http://maccman.github.io/wysiwyg/ |
 |
4
breeswish 2013-05-09 23:43:06 +08:00 via Android 2
一般两种实现:
1) ContentEditable 2) IFrame 又, 一般为了达到ie兼容, 使用方法2 iframe主要是利用其designmode来实现，具体你搜索iframe designmode就有了；contenteditable是一个属性，具体取值自己看mdn，它是一种轻量级的编辑区域，至于和iframe的功能区别嘛……我不是很了解。 iframe的hack主要集中在cursor处理方面，因为IE和其他浏览器处理方式迥异←_←另外也有一些ExecCommand()上的差异也需要兼容性处理，除此以外其他的兼容性基本都是些很高级功能时候需要 比如处理表格之类 iframe WYSIWYG 专业级别编辑器: tinymce fckeditor 轻量级别除了楼上给出的以外也有不少 不过我都没用过 = = |
Select Language