狠狠撸

KISSY Editor 设计（2）
yiminghe@gmail.com
kissyteam@weibo,twitter
yiminghe@twitter

2012.06.25 Draft

大纲
? 1. KISSY Editor 介绍

? 2. 编辑器基本原理

? 3. KISSY Editor 实践
– 3.1 API
– 3.2 设计
– 3.4 使用

KISSY Editor

又一个开源的可视化编辑器

底层以及 UI 基于 KISSY 框架

编辑核心算法借鉴 CKEditor

应用于淘宝商品发布/店铺装修/论坛/….

KISSY Editor
? Toggle Button

? Select

KISSY Editor
? Overlay

? ContextMenu

编辑器基本原理
? contentEditable
? designMode

? 使某个元素可编辑
– Iframe.contentWindow.document.body.conten
tEditable = true

? http://www.w3.org/TR/html5/editing.html#attr-
contenteditable

? document.execCommand

? Range/Selection
– IE (<=8)
? Selection: http://msdn.microsoft.com/en-
us/library/ie/ms535869(v=vs.85).aspx
– createRange/clear/empty

? Range: http://msdn.microsoft.com/en-
us/library/ie/ms535872(v=vs.85).aspx
– compareEndPoints/move/select/parentElement

? Range/Selection
– W3c
– http://www.w3.org/TR/DOM-Level-2-
Traversal-Range/ranges.html
– Selection
? rangeCount/getRangeAt/addRange/removeRange
– Range
? startContainer/startOffset/endContainer/endOffset

? 根据规范由 javascript 实现浏览器内置的编
辑算法
– http://dvcs.w3.org/hg/editing/raw-file/tip/editing.html

Body

P P p

12 34 56 strong 89

7

? 编辑 api
– 加粗
– xhtml DTD
Body

P P p

1 strong strong strong 9

2 34 5678

? 编辑 api
– 标题 h1

p

123 strong 789

456

? 编辑 api
– 标题 h1

h1

123 strong 789

456

其他兼容性问题
? Copy/paste <font face="宋体"></font><p
style="margin: 0cm 0cm 0pt;"
– Word class="MsoNormal"><span lang="EN-
US"><font face="Calibri">123<b
style="mso-bidi-font-weight:
normal;">456</b>789<?xml:namespace
? Html parser prefix = o ns = "urn:schemas-microsoft-
com:office:office"
/><o:p></o:p></font></span></p><font
face="宋体"></font>

123456789
<p>123<strong>456</strong>789</p>

? 换行
– P / Br ?
table

tr

td

123456

? 图片选择
– 输入内容
? IE/firefox/chrome

? 失去焦点选区丢失
– IE

? ………

KISSY Editor

? API

? 设计

? 使用

KISSY Editor
? 基于 KISSY
– 模块化机制
– 组件基础设施
? 事件 KISSY Component
? 属性
? 方法
? 生命周期
– 使用 KISSY UI KISSY Editor

KISSY.use(“editor”, function (S,Editor){
S.use(“plugin1,plugin2”, function (S,P1,P2){
new Editor({
// …
plugins:[
new P1({…}), P2
]
});});});

不启用自动 combine 时推荐 use ”editor/full”

继承属性
? width/height
– 高宽（包括工具栏与状态栏）

? focused
– 是否编辑区起始具备焦点

? prefixCls
– 编辑器 UI 样式前缀

继承属性
? xclass
– 组件嵌套时的快速生成

new Overlay({

children:[{

xclass: ’editor’,

width:500,

height:500

}]
});

继承属性
? srcNode
– 从已有节点生成编辑器组件

? render
– 编辑器组件渲染容器

继承属性
? listeners
– 方便绑定事件
new Editor({

listeners:{

focus: function(){}
}}).render;

? plugins
– 添加插件

编辑器属性
? customStyle
– 作用于编辑区域的特有样式

? customLink
– 作用于编辑区域的特有样式链接

? attachForm
– 绑定所属 form submit 事件

编辑器方法
? addButton
– 添加按钮到工具栏
? addSelect
– 添加 select 到工具栏

? insertHtml
– 插入 html 到光标位置
? execCommand
– 执行自定义命令

Editor & plugins

button select menu overlay Edit API
Html
Parser
component range selection &
xhtml
dtd
dom event node ua base

KISSY Loader

模块
? 所有代码都是模块

KISSY.add("editor/range",function(S,DOM){
},{
requires:['dom']
});

懒加载
? 懒加载非初始模块

懒加载
? 使用 KISSY.use

KISSY.add("editor/plugin/image",function(S,DOM){
xx.on("click",function(){
S.use("editor/plugin/image/dialog");
});
});

按需自动 combo
? 仅加载需要的模块
– 最优的链接数与代码引入大小
KISSY.use("editor",function(){
KISSY.use("editor/plugin/fontSize/,editor/plugin

/fontFamily/",

function(){

// use plugins

});});

无障碍
? Aria in KISSY UI
– Tab 支持
– 所有功能键盘可访问
– Aria 标记

? 编辑区域快捷键

插件
? 具备介入组件生命周期能力的普通模块

createDOM renderUI bindUI syncUI

插件示例
KISSY.add("editor/plugin/bold/index",function(){
function FontSize(cfg){this.cfg=cfg;}
FontSize.prototype={
renderUI:function(editor){
editor.addButton(...);
}
};
return FontSize;
});

消息通信
? 核心 ? 插件
plugin2
? 插件 ? 插件

editor.fire("selectionChange
"); editor
editor.on("selectionChange",
function(){ plugin3 Plugin1
});

命令系统
? document.execCommand
? editor.execCommand

editor.execCommand("fontSize","1
8px"); fontFamily

editor.execCommand("fontFamily",
fontSize bold
"kaiti");

editor.execCommand("bold",true);
editor

单元测试
? 部分核心 jasmine

单元测试
describe("cloneContents", function () {

it(“works for simple text node”, function () {
var range = new Range(document);
range.setStart(text, 2);
range.setEnd(text, 5);
var f = range.cloneContents();
var newDiv = KISSY.all("<div>").appendTo("body");
newDiv.append(f);

expect(myHtml(newDiv)).toBe("345");
});
});

引入脚本

<script src=/slideshow/ss-13442557/13442557/&
min.js'></script>



<script src='http://a.tbcdn.cn/s/kissy/1.3.0/kissy-
min.js'></script>

载入模块、插件

// 自动 combo
KISSY.config("combine",true);
// editor 核心/种子文件
KISSY.use("editor",function(S,Editor){
// editor 插件
S.use("editor/plugin1,editor/plugin2...",
function(S,Plugin1,Plugin2){});
});

初始化
? 从已有节点产生
new Editor({
width:,
height:,
srcNode:'#editor',
plugins:[
new Plugin1({..}),
Plugin2
]
});

初始化
? 全新创建编辑器
new Editor({
width:,
height:,
render:'#editorContainer',
plugins:[
new Plugin1({..}),
Plugin2
]
});

定制插件
? 实现指定接口的普通模块

? editor.addButton
? editor.addSelect
? editor.execCommand
? editor.insertHtml

? 了解 KISSY Editor

? 编辑器基本原理

? KISSY Editor 设计

下一步
? I18n 全球化

? 主题 Theme 架构

? 单元测试完善

? 紧密结合 KISSY UI

狠狠撸

KISSY Editor Design 2

Recommended

More Related Content

What's hot (20)

Similar to KISSY Editor Design 2 (20)

More from yiming he (20)

KISSY Editor Design 2