kissy editor 阶段感受

kissy editor 阶段体会

从 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

?

?

?

?

?

?