kissy editor 阶段体会

阅读更多

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


kissy editor 2.0 beta


也有必要整理一下思路。

 

功能:

 

 

 

由左至右包括:源代码查看,预览,模板,撤销与重做,清除格式,大小,字体,加粗,倾斜,下划线,删除线,标题格式,背景色,文本色,项目列表,编号列表,左缩进,右缩进,左对齐,居中对齐,右对齐,链接,插入flash,插入音乐,表情,表格编辑,分页符,最大化

 

 

代码结构:

 

通用核心:

 

事件以及dom操作采用 kissy ,改进 kissy loader 从公共插件源载入插件功能到编辑器单个实例。

 

kissy editor 阶段体会_第1张图片

 


编辑器核心:

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


iframe 初始化兼容性处理

编辑器 iframe firefox 焦点兼容

ie 自定义域( domain )处理

dom节点的各种遍历,抽象的walker以及dom node iterator(迭代器)

dtd 的 javascript 简便表示

html parser 的 javascript 实现

range以及selection在ie下的标准实现

最终标签格式化体系的整合应用(styles)

 

kissy editor 阶段体会_第2张图片

 

核心插件:

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

 

kissy editor 阶段体会_第3张图片

 

 

UI组件:

 

紧密结合编辑器的功能需求以及特性,形成:

 

0.triplebutton

 

 

三态按钮,包括可选(on),不可选(disabled),已选中(off)三个状态。

 


1.overlay

 

kissy editor 阶段体会_第4张图片

 

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


2.bubble view (泡泡弹出)

 

kissy editor 阶段体会_第5张图片

 

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

 

 

3.下拉框

 

kissy editor 阶段体会_第6张图片

 

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


4.popup

 

kissy editor 阶段体会_第7张图片

 

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


5.右键

 

kissy editor 阶段体会_第8张图片


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


辅助功能:


拖放

 

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


离线存储 :


使用flash模拟html5对应特性。

 

多文件上传:


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

 

主题:


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


打包工具:


采用 ant 编写具有一定扩展性的自动build脚本 ,分离核心插件以及业务插件。

 

 

 

预览地址:

 

kissy editor 2.0 beta

 

 

 

 

 

 

  • kissy editor 阶段体会_第9张图片
  • 大小: 10.1 KB
  • kissy editor 阶段体会_第10张图片
  • 大小: 6.3 KB
  • kissy editor 阶段体会_第11张图片
  • 大小: 12.3 KB
  • kissy editor 阶段体会_第12张图片
  • 大小: 17.4 KB
  • kissy editor 阶段体会_第13张图片
  • 大小: 6.5 KB
  • kissy editor 阶段体会_第14张图片
  • 大小: 104.8 KB
  • kissy editor 阶段体会_第15张图片
  • 大小: 6 KB
  • kissy editor 阶段体会_第16张图片
  • 大小: 4.6 KB
  • kissy editor 阶段体会_第17张图片
  • 大小: 4.5 KB
  • kissy editor 阶段体会_第18张图片
  • 大小: 857 Bytes
  • kissy editor 阶段体会_第19张图片
  • 大小: 727 Bytes
  • kissy editor 阶段体会_第20张图片
  • 大小: 530 Bytes
  • 查看图片附件

你可能感兴趣的:(JavaScript,IE,Flash,Ant,HTML5)