富文本编辑器允许用户在网站上实现所见即所得的编辑效果，广泛应用于论坛、博客、电子商城等场景。文中讨论了多种编辑器的选择和技术实现，包括编辑器的基本原理、操作DOM和存在的问题。还有关于安全性、数据管理和移动设备支持的建议。

1. 富文本编辑器在互联网上的应用 2012-01-04

2. 关于我 罗龙浩（ Roddy ） 热爱互联网，喜欢编程 接触过 JavaScript 、 HTML/CSS 、 PHP 、 Perl 、 Java www.weibo.com /luolonghao [email_address] [email_address]

3. 富文本编辑器 主要用于让用户在网站上获得所见即所得编辑效果，可以替代传统的 TEXTAREA 输入框。 富文本编辑器、可视化编辑器、在线 HTML 编辑器、在线编辑器、 HTML 编辑器

5. 在互联网上的应用场景 论坛：发贴 博客：写博客 SNS ：写日记 邮箱：写邮件 电子商城：编辑商品描述，店铺装修 Wiki ：编辑 wiki CMS ：写文章，编辑模板

6. 编辑器原理

7. 把文档或元素转换成编辑模式，即可实现输入文字功能。 element.contentEditable = ‘true’ document.designMode = ‘on’ 最先只有 IE 支持，其它浏览器相继跟进，从功能的丰富性和稳定性来说，应该是 IE > Firefox > Webkit > Opera

8. 操作 DOM ，编辑 HTML <div>abc</div> to <div><strong>abc</strong></div> execCommand 函数 document.execCommand(‘bold’)

9. contentEditable 的问题 回车换行行为不一致 右键菜单不一致 选中图片、表格行为不一致 粘贴 后退 / 撤销

10. execCommand 的问题 不够灵活，无法定制 （元素添加 class ，超级链接添加 target=“_blank” 等） 生成恐怖的 HTML 代码 （ IE 的 font 标签， Webkit 的 b 标签 等） execCommand 本身 BUG （在 IE 上 removeformat 无法清理 span 等）

11. 技术难点

12. 样式系统，实现 execCommand 回车换行 陌生的 API ： Selection 、 Range 兼容性： IE6-8 、 IE9 、 Firefox 、 Webkit 、 Opera HTML 格式化：不同浏览器输出一致的 HTML 性能： IE6-8 JS 引擎和 DOM 操作 浏览器本身的问题 测试：不同组合，不同顺序

13. Range 接口 标准 API startContainer startOffset endContainer endOffset setStart() setEnd() cloneContents() deleteContents() IE TextRange API htmlText text moveStart() moveEnd() moveToElementText() compareEndPoints() collapse() pasteHTML()

14. 加粗一段文本 (1) abc 123 def to abc<strong> 123 </strong>def ab c<em>123 </em>def to ab<strong> c</strong><em><strong>123 </strong></em>def

15. 加粗一段文本 (2) <div>abc 123</div><div>abc 123</div> to <div>abc<strong> 123</strong></div><div><strong>abc </strong>123</div> <table><tr><td>abc 123</td><td><strong>abc123</strong></td></tr></table><div><span style=“font-weight:bold;”>abc</span> 123</div>

16. 如何选择

17. CKEditor 、 FCKEditor TinyMCE KindEditor xhEditor ：基于 jQuery KISSY Editor ：基于 KISSY UEditor eWebEditor 自主开发

18. 初始化大小（ min + gzip ） CKEditor ： 114KB TinyMCE ： 116KB KindEditor ： 28.1KB xhEditor ： 20KB KISSY Editor ： 111.9KB UEditor ： 116KB （ source + gzip ） eWebEditor ： 90.1KB

19. 百度指数

20. CKEditor/FCKEditor 用户 IBM Lotus Oracle Application Express Adobe ColdFusion Zope Mozilla Developer Network Dedecms PHPCMS EmpireCMS

21. TinyMCE 用户 WordPress 早期 oschina ITeye facebook Microsoft jivesoftware

22. KindEditor 用户 oschina 拍拍网 泡泡网 有道笔记 麦库笔记 chinaz emlog

23. 自主开发 Google 百度 腾讯 淘宝网 开心网 互动百科

24. 我的建议 选择一款适合自己的开源编辑器 聘用 JS 程序员，二次开发 向开源社区提交 BUG 补丁 赞助开源编辑器，快速解决 BUG

25. KindEditor 实践

26. 使用方法 引入 kindeditor.js <script src=&quot;/path/kindeditor.js&quot;></script> <script src=&quot;/path/lang/zh_CN.js&quot;></script> 添加 <textarea id=&quot;J_content&quot;></textarea> 添加脚本 var editor; window.onload = function() { editor = KindEditor.create('#J_content'); };

27. 其它场景 Ajax or 异步 jQuery

28. 初始化参数 width height items urlType afterCreate afterChange afterTab http:// www.kindsoft.net/docs/option.html

29. 初始化参数实例 K.create(‘#J_content’, { items : [‘bold’], resizeType : 1, afterCreate : function() { console.log(this); } });

30. 获取数据 取得全部数据： 方法 #1 ： html = editor.html(); 方法 #2 ： editor.sync(); // 同步到 TEXTAREA html = $('#J_content'); 取得被选中的数据： html = editor.selectedHtml();

31. 设置数据 初始化： <textarea>HTML 代码 </textarea> 替换数据： editor.html('HTML 代码 '); 插入数据： editor.insertHtml('HTML 代码 '); 追加数据： editor.appendHtml('HTML 代码 ');

32. editor 其它方法 isEmpty() fullHtml() count() / count(‘text’) focus() / blur() remove() http:// www.kindsoft.net/docs/editor.html

33. 图片管理 建议使用图片空间模式 不要直接遍历目录

34. 上传文件 配置 uploadJson 参数 uploadJson : '../php/upload_json.php' 请求参数： imgFile 后端返回 JSON 数据 { &quot;error&quot; : 0, &quot;url&quot; : &quot;/path/to/file.jpg&quot; }

35. 批量上传（ swfupload ） var swfu; window.onload = function () { swfu = new SWFUpload({ upload_url : &quot;upload.php&quot;, flash_url : &quot;swfupload.swf&quot;, upload_success_handler : function(file){ console.log(file.name); } }); };

36. 编辑器安全

38. 几种危险 XSS （ Cross Site Scripting ） CSRF （ Cross Site Request Forgery ）

39. XSS http:// ha.ckers.org/xss.html http://xss-quiz.int21h.jp/

40. 简单 CSRF 实例 张三登录 a.com 张三打开一个页面，该页面有以下代码 <img src=“http://a.com/logout” />

41. HTML/CSS 问题 <a style=&quot;position:absolute;display:block;z-index:10000;top:0;left:0;width:3000px;height:3000px;&quot; href=&quot;http://www.google.com/&quot;></a> HTML 标签未关闭

42. 防御方法 白名单过滤机制 补齐 HTML 标签 生成随机令牌

43. HTML Purifier （ PHP ） $config = HTMLPurifier_Config::createDefault(); $config->set('HTML.Allowed', $tags); $def = $config->getHTMLDefinition(true); $def->addAttribute('table', 'height', 'Number'); $def->addAttribute('a', 'target', 'Text'); $purifier = new HTMLPurifier($config); if (get_magic_quotes_gpc()) { $html = stripslashes($html); } $html = $purifier->purify($html); if (get_magic_quotes_gpc()) { $html = addslashes($html); } $html = str_replace(&quot;\xC2\xA0&quot;, &quot;&nbsp;&quot;, $html);

44. Jsoup （ Java ） String safe = Jsoup .clean(unsafe, Whitelist .basic()); http:// jsoup.org /

45. 对移动设备的支持 iOS ： 5+ Android ：不支持 Symbian ：不支持 Windows Phone ：？

46. 谢谢