- 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
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. 谢谢
