- 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
toabc
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)abc123deftoabc123def
abc123deftoabc123def
- 15. 加粗一段文本(2)
abc123
abc123
toabc123
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(); // 同步到TEXTAREAhtml = $('#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. 谢谢