• 1. 富文本编辑器在互联网上的应用2012-01-04
  • 2. 关于我罗龙浩(Roddy) 热爱互联网,喜欢编程 接触过JavaScript、HTML/CSS、PHP、Perl、Java www.weibo.com/luolonghao luolonghao@gmail.com luolonghao@hotmail.com
  • 3. 富文本编辑器主要用于让用户在网站上获得所见即所得编辑效果,可以替代传统的TEXTAREA输入框。 富文本编辑器、可视化编辑器、在线HTML编辑器、在线编辑器、HTML编辑器
  • 4. (本页无文本内容)
  • 5. 在互联网上的应用场景论坛:发贴 博客:写博客 SNS:写日记 邮箱:写邮件 电子商城:编辑商品描述,店铺装修 Wiki:编辑wiki CMS:写文章,编辑模板
  • 6. 编辑器原理
  • 7. 把文档或元素转换成编辑模式,即可实现输入文字功能。 element.contentEditable = ‘true’ document.designMode = ‘on’ 最先只有IE支持,其它浏览器相继跟进,从功能的丰富性和稳定性来说,应该是 IE > Firefox > Webkit > Opera
  • 8. 操作DOM,编辑HTML
    abc
    to
    abc
    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)abc123def to abc123def abc123def to abc123def
  • 15. 加粗一段文本(2)
    abc123
    abc123
    to
    abc123
    abc123
    abc123abc123
    abc123
  • 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 添加 添加脚本 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. 设置数据初始化: 替换数据: 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数据 { "error" : 0, "url" : "/path/to/file.jpg" }
  • 35. 批量上传(swfupload) var swfu; window.onload = function () { swfu = new SWFUpload({ upload_url : "upload.php", flash_url : "swfupload.swf", upload_success_handler : function(file){ console.log(file.name); } }); };
  • 36. 编辑器安全
  • 37. (本页无文本内容)
  • 38. 几种危险XSS(Cross Site Scripting) CSRF(Cross Site Request Forgery)
  • 39. XSShttp://ha.ckers.org/xss.html http://xss-quiz.int21h.jp/
  • 40. 简单CSRF实例张三登录a.com 张三打开一个页面,该页面有以下代码
  • 41. HTML/CSS问题 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("\xC2\xA0", " ", $html);
  • 44. Jsoup(Java)String safe = Jsoup.clean(unsafe, Whitelist.basic()); http://jsoup.org/
  • 45. 对移动设备的支持iOS:5+ Android:不支持 Symbian:不支持 Windows Phone:?
  • 46. 谢谢