More Related Content
Similar to Kissy editor开发与设计 (20)
Kissy editor开发与设计
- 2. About me
2003 - 2010 Fudan CS
2010.07 - F2E @ Taobao
目前开发维护 kissy editor
- 3. 大纲
1. 编辑器的分类
2. 编辑器的实现
3. KISSY Editor的设计
4. 打包与部署
5. 总结与前景展望
- 8. 2. 编辑器的实现
创建 iframe 元素,设置 body 属性
contenteditable为 true
方法
◦ 调用 execCommand
◦ Range 自主实现
实现注意
- 9. 2.1 调用 execCommand
ie 4.0 引入
bSuccess = object.execCommand(sCommand[,bUserInterface][,vValue])
◦ sCommand : 命令名
◦ bUserInterface : 用户界面提示
◦ vValue : 命令参数
- 10. execCommand 例子
加粗当前选择文字
◦ document.execCommand("bold",null,false);
添加链接
◦ 直接添加
document.execCommand("createlink",
null,"http://www.g.cn");
◦ 弹窗提示用户输入
document.execCommand("createlink",
true);
- 11. execCommand 问题
◦ 代码生成不一致
行内格式化
ie 会生成 font 标签
<font color=“#ff0000”>x</font>
safari 生成私有 class
<span
class=“Apple-style-span”
style=“font-weight:bold;”>x</span>
◦ 能力不一致
Createlink
Firefox 不支持用户界面提示
自己 window.prompt
- 15. W3c Range
用来获取光标或选择区域信息
W3c api
Interface Range {
◦ Node startContainer
◦ Long startOffset
◦ Node endContainer
◦ Long endOffset
}
- 16. IE Range
ControlRange
◦ 选取整个元素 (div,img,object)
◦ Item (index) : 获取选中元素节点
TextRange
◦ 获取选中的文本区域
◦ Text : 选中的文本串值
◦ parentElement() :
◦ compareEndPoints()
◦ moveToElementText()
- 19. Dtd 的作用
标签格式化系统需要考虑标签嵌套规则
根据 dtd 以及格式标签进行 Range 的
拆分!
- 20. Dtd 例子
加粗
◦ ^<p>line</p><p>line2</p>^
◦ 错误:
<strong><p>line</p><p>line2</p>
</strong>
◦ 正确:
<p><strong>line<strong></p>
<p><strong>line2</strong></p>
- 21. 2.3 常见问题
换行代码生成差异
ie 选择区域丢失问题
Firefox 不可编辑问题
光标定位问题…..
- 22. Enter 换行差异
◦ <h1>bla bla^</h1> 末尾换行
ie
<h1>bla bla</h1>
<p>|</p>
Safari
<h1>bla bla</h1>
<h1>|</h1>
Firefox
<h1>bla bla</h1>
|<br><br>
- 23. ie 选择区域丢失
ie 编辑器内 iframe文档失去焦点后,
其选择区域/光标位置也随之丢失 。
解决:
◦ 随时存储当前 range
◦ 即将获取焦点前(focusin)立即恢复
range
- 24. Firefox 不可编辑问题
Firefox 编辑器内 iframe 移动后(最
大化),不可再编辑。
解决:
◦ 重置 contenteditable 属性
- 25. 3. KISSY Editor 的设计
3.1 功能简介与 demo 演示
3.2 总体架构
3.3 插件机制
3.4 动态加载机制
3.5 定制插件开发
3.6 设计模式的应用
- 28. 3.2 总体架构
Custom
plugins
Core
plugins
Editor core
Kissy core
- 30. 3.3 插件机制
editor.addCommand(“image”,imageSupportObj);
- 31. 插件实现分离机制
插件的功能定义在 KISSY.Editor
◦ 插件功能类:
KISSY.Editor.ColorDef.prototype.do=function(){}
◦ UI插件类
KISSY.Editor.Overlay=function(){
}
- 32. 插件的实例应用
插件最终要使用在实例上
◦ KISSY.Editor.use(“colordef”,function(){
editor.addButton({
click:function(){
colorInstance.do();
}
});
◦ });
实例的use即是应用插件的过程
◦ editor.use(“color”);
- 35. 定制插件开发例子
Sourcearea 与 bangpai-sourcearea
调用execCommand
editor.execCommand(“modeChange”
,”source”);
- 37. Template method
Flash
+gen()
+getUrl() : string
+getDemision() : object
music
+getUrl() : string
+getDemision() : object
- 38. Visitor / filter
HtmlParser
+parse(in html : string, in fragment : object)
Fragment
+onNode(in node : object)
+onElement(in el : object)
+onAttribute(in attr : object)
- 39. Observer-listener
最常见
Editor -subject
-selectionChangeHanlders : object
+on(in selectionChangeHanlder : object)
1
+fire(in selectionChangeEvent : object)
* -observer
SelectionChangeHanlder
+onSelectionChange(in selectionChangeEvent : object)
Plugin
+onSelectionChange(in selectionChangeEvent : object)
- 40. Command
Editor
+addCommand(in cmd : string, in func : object)
+execCommand(in cmd : string)
复杂的操作用命令封装
editor.addCommand(“align”,alignCmdObj);
editor.execCommand(“align”,”left”);
- 45. 4.3 部署
动态引入(combo加载)
◦ Kissy-seed.js
KISSY.use(“editor”,function(S) {
S.Editor(“#e”).use(“font,image,music”);
});
Cdn combo 两阶段
http://a.tbcdn.cn/??kissy-core.js,editor/editor-core.js
http://a.tbcdn.cn/??
editor/plugins/font/plugin.js,editor/plugins/image/plugin.js
- 46. 5.总结
1. 再次回顾
2. 与其他编辑器的比较
3. 前景与展望
- 48. 其他编辑器
站在巨人肩上
◦ ckeditor , tinymce,google doc
- 49. 前景与展望
1. 更少代码完成80%的功能
2. 触摸事件支持,加强Mobile设备
3. Html5 代码生成,使用 video ,
audio . 生成 header , nav , section ,
加强标签语义 .
- 50. 感谢
Kissy editor 1.0 :玉伯
视觉: 书安倾情奉献
产品经理:向秋
测试:小菊,南玲,周坤,黛霁