从 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