kissy editor 阶段体会

yiminghe

从 7.19 开始调研并开发到现在，经过两周的测试算是基本稳定了，下一步就是重构以及插件规划，完善插件层次，抽象公共功能，先放出预览地址：


kissy editor 2.0 beta



也有必要整理一下思路。
 
功能：
 

 
 
由左至右包括：源代码查看，预览，模板，撤销与重做，清除格式，大小，字体，加粗，倾斜，下划线，删除线，标题格式，背景色，文本色，项目列表，编号列表，左缩进，右缩进，左对齐，居中对齐，右对齐，链接，插入flash，插入音乐，表情，表格编辑，分页符，最大化
 
 
代码结构：
 
通用核心：
 
事件以及dom操作采用 kissy，改进 kissy loader 从公共插件源载入插件功能到编辑器单个实例。
 

 


编辑器核心：

格式化以及节点遍历采用 ckeditor core，移植到 kissy ，包括 ：


iframe 初始化兼容性处理
编辑器 iframe firefox 焦点兼容
ie 自定义域( domain )处理
dom节点的各种遍历，抽象的walker以及dom node iterator（迭代器）
dtd 的 javascript 简便表示
html parser 的 javascript 实现

range以及selection在ie下的标准实现
最终标签格式化体系的整合应用（styles）
 

 
核心插件：
将插件注册到全局空间 KISSY.Editor，编辑器实例通过 use 来使其获取对应插件功能，其中UI组件作为一种特殊的插件对待：
 

 
 
UI组件：
 
紧密结合编辑器的功能需求以及特性，形成：
 
0.triplebutton
 


 
三态按钮，包括可选（on），不可选（disabled），已选中（off）三个状态。
 


1.overlay
 

 
弹出框功能，必定附属于某个插件，弹出前后处理与其关联的编辑器焦点。


2.bubble view (泡泡弹出)
 

 
继承自 overlay ，属于仿google doc实现，是图片以及链接编辑的快捷方式，集中控制筛选特定元素，在选中时弹出tip操作提示。
 
 
3.下拉框
 

 
组合自overlay，模拟系统自带的下拉框，解决ie6 原生下拉框干扰编辑器内部焦点问题


4.popup
 

 
overlay的简单应用，直接结合插件，在其下方弹出


5.右键
 



组合自 overlay ，集中控制筛选特定元素，右键弹出对应功能菜单。



辅助功能：


拖放
 

参考 yui3 dd 的实现，目前只有 drag，但是已经足够。


离线存储：


使用flash模拟html5对应特性。
 
多文件上传：


进行中，使用多文件上传flash处理进度以及文件多选问题。
 
主题：


集成 google 以及 taobao清爽主题，主题以文件为目录分插（组）件组织，发布时利用ant按照各自主题打包出对于单个css文件。



打包工具：


采用 ant 编写具有一定扩展性的自动build脚本，分离核心插件以及业务插件。
 
 
 
预览地址：
 
kissy editor 2.0 beta