• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
富文本编辑器在互联网上的应用
 

富文本编辑器在互联网上的应用

on

  • 767 views

 

Statistics

Views

Total Views
767
Views on SlideShare
767
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    富文本编辑器在互联网上的应用 富文本编辑器在互联网上的应用 Presentation Transcript

    • 富文本编辑器在互联网上的应用 2012-01-04
    • 关于我
      • 罗龙浩( Roddy )
      • 热爱互联网,喜欢编程
      • 接触过 JavaScript 、 HTML/CSS 、 PHP 、 Perl 、 Java
      • www.weibo.com /luolonghao
      • [email_address]
      • [email_address]
    • 富文本编辑器
      • 主要用于让用户在网站上获得所见即所得编辑效果,可以替代传统的 TEXTAREA 输入框。
      • 富文本编辑器、可视化编辑器、在线 HTML 编辑器、在线编辑器、 HTML 编辑器
    •  
    • 在互联网上的应用场景
      • 论坛:发贴
      • 博客:写博客
      • SNS :写日记
      • 邮箱:写邮件
      • 电子商城:编辑商品描述,店铺装修
      • Wiki :编辑 wiki
      • CMS :写文章,编辑模板
    • 编辑器原理
      • 把文档或元素转换成编辑模式,即可实现输入文字功能。 element.contentEditable = ‘true’ document.designMode = ‘on’
      • 最先只有 IE 支持,其它浏览器相继跟进,从功能的丰富性和稳定性来说,应该是 IE > Firefox > Webkit > Opera
      • 操作 DOM ,编辑 HTML <div>abc</div> to <div><strong>abc</strong></div>
      • execCommand 函数 document.execCommand(‘bold’)
    • contentEditable 的问题
      • 回车换行行为不一致
      • 右键菜单不一致
      • 选中图片、表格行为不一致
      • 粘贴
      • 后退 / 撤销
    • execCommand 的问题
      • 不够灵活,无法定制 (元素添加 class ,超级链接添加 target=“_blank” 等)
      • 生成恐怖的 HTML 代码 ( IE 的 font 标签, Webkit 的 b 标签 等)
      • execCommand 本身 BUG (在 IE 上 removeformat 无法清理 span 等)
    • 技术难点
      • 样式系统,实现 execCommand
      • 回车换行
      • 陌生的 API : Selection 、 Range
      • 兼容性: IE6-8 、 IE9 、 Firefox 、 Webkit 、 Opera
      • HTML 格式化:不同浏览器输出一致的 HTML
      • 性能: IE6-8 JS 引擎和 DOM 操作
      • 浏览器本身的问题
      • 测试:不同组合,不同顺序
    • Range 接口
      • 标准 API
      • startContainer
      • startOffset
      • endContainer
      • endOffset
      • setStart()
      • setEnd()
      • cloneContents()
      • deleteContents()
      • IE TextRange API
      • htmlText
      • text
      • moveStart()
      • moveEnd()
      • moveToElementText()
      • compareEndPoints()
      • collapse()
      • pasteHTML()
    • 加粗一段文本 (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
    • 加粗一段文本 (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>
    • 如何选择
      • CKEditor 、 FCKEditor
      • TinyMCE
      • KindEditor
      • xhEditor :基于 jQuery
      • KISSY Editor :基于 KISSY
      • UEditor
      • eWebEditor
      • 自主开发
    • 初始化大小( min + gzip )
      • CKEditor : 114KB
      • TinyMCE : 116KB
      • KindEditor : 28.1KB
      • xhEditor : 20KB
      • KISSY Editor : 111.9KB
      • UEditor : 116KB ( source + gzip )
      • eWebEditor : 90.1KB
    • 百度指数
    • CKEditor/FCKEditor 用户
      • IBM Lotus
      • Oracle Application Express
      • Adobe ColdFusion
      • Zope
      • Mozilla Developer Network
      • Dedecms
      • PHPCMS
      • EmpireCMS
    • TinyMCE 用户
      • WordPress
      • 早期 oschina
      • ITeye
      • facebook
      • Microsoft
      • jivesoftware
    • KindEditor 用户
      • oschina
      • 拍拍网
      • 泡泡网
      • 有道笔记
      • 麦库笔记
      • chinaz
      • emlog
    • 自主开发
      • Google
      • 百度
      • 腾讯
      • 淘宝网
      • 开心网
      • 互动百科
    • 我的建议
      • 选择一款适合自己的开源编辑器
      • 聘用 JS 程序员,二次开发
      • 向开源社区提交 BUG 补丁
      • 赞助开源编辑器,快速解决 BUG
    • KindEditor 实践
    • 使用方法
      • 引入 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'); };
    • 其它场景
      • Ajax or 异步
      • jQuery
    • 初始化参数
      • width
      • height
      • items
      • urlType
      • afterCreate
      • afterChange
      • afterTab
      • http:// www.kindsoft.net/docs/option.html
    • 初始化参数实例
      • K.create(‘#J_content’, { items : [‘bold’], resizeType : 1, afterCreate : function() { console.log(this); } });
    • 获取数据
      • 取得全部数据: 方法 #1 : html = editor.html(); 方法 #2 : editor.sync(); // 同步到 TEXTAREA html = $('#J_content');
      • 取得被选中的数据: html = editor.selectedHtml();
    • 设置数据
      • 初始化: <textarea>HTML 代码 </textarea>
      • 替换数据: editor.html('HTML 代码 ');
      • 插入数据: editor.insertHtml('HTML 代码 ');
      • 追加数据: editor.appendHtml('HTML 代码 ');
    • editor 其它方法
      • isEmpty()
      • fullHtml()
      • count() / count(‘text’)
      • focus() / blur()
      • remove()
      • http:// www.kindsoft.net/docs/editor.html
    • 图片管理
      • 建议使用图片空间模式
      • 不要直接遍历目录
    • 上传文件
      • 配置 uploadJson 参数 uploadJson : '../php/upload_json.php'
      • 请求参数: imgFile
      • 后端返回 JSON 数据 { &quot;error&quot; : 0, &quot;url&quot; : &quot;/path/to/file.jpg&quot; }
    • 批量上传( 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); } }); };
    • 编辑器安全
    •  
    • 几种危险
      • XSS ( Cross Site Scripting )
      • CSRF ( Cross Site Request Forgery )
    • XSS
      • http:// ha.ckers.org/xss.html
      • http://xss-quiz.int21h.jp/
    • 简单 CSRF 实例
      • 张三登录 a.com
      • 张三打开一个页面,该页面有以下代码 <img src=“http://a.com/logout” />
    • 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 标签未关闭
    • 防御方法
      • 白名单过滤机制
      • 补齐 HTML 标签
      • 生成随机令牌
    • 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;xC2xA0&quot;, &quot;&nbsp;&quot;, $html);
    • Jsoup ( Java )
      • String safe = Jsoup .clean(unsafe, Whitelist .basic());
      • http:// jsoup.org /
    • 对移动设备的支持
      • iOS : 5+
      • Android :不支持
      • Symbian :不支持
      • Windows Phone :?
    • 谢谢