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

 

 

 

 

 

 

评论

14 楼 kingkongtown 2014-12-10  

如果想改成淘宝后台那样，可以在编辑器批量上传图片呢？

13 楼 hxp520520 2014-07-08  

同一个jsp 有多个编辑器怎么取值呢？我试过了，多个的话，貌似后面的会覆盖前面，能取到的值只能是后面的。

12 楼 yiminghe 2013-12-12  

docs.kissyui.com 自己找下吧

tomsyc 写道

yiminghe 写道

yangsheng 写道

你给的地址已经失效了，请博主更新一下

ok
https://github.com/kissyteam/kissy-editor/tree/standalone

这个地址也访问不到了。

11 楼 tomsyc 2013-10-30  

yiminghe 写道

yangsheng 写道

你给的地址已经失效了，请博主更新一下

ok
https://github.com/kissyteam/kissy-editor/tree/standalone

这个地址也访问不到了。

10 楼 yiminghe 2013-05-07  

bookyellow 写道

我们一般初始化一个编辑框的时候用KISSY.Editor("demo")
如果是初始化多个呢？怎么操作？

循环

9 楼 bookyellow 2013-03-21  

我们一般初始化一个编辑框的时候用KISSY.Editor("demo")
如果是初始化多个呢？怎么操作？

8 楼 yiminghe 2011-07-25  

yangsheng 写道

你给的地址已经失效了，请博主更新一下

ok
https://github.com/kissyteam/kissy-editor/tree/standalone

7 楼 yangsheng 2011-07-22  

你给的地址已经失效了，请博主更新一下

6 楼 yanghj_eye 2010-12-27  

能指个招 吗 ,使用本地的js库,通过配置editor参数呢,或者是修改下 源码方式修改表情库呢

5 楼 yanghj_eye 2010-12-27  

yiminghe 写道

yanghj_eye 写道

请问下,如果引用 远程库js的话,能不能自定义配置表情呢?

目前不能，你可以提个配置接口：

不过一般表情是张大图：
http://a.tbcdn.cn/sys/wangwang/smiley/sprite.png

以及一些小图：
http://a.tbcdn.cn/sys/wangwang/smiley/48x48/0.gif

我在kissy的官网上面,下了1.5的editor版本,我引用本地这个kissy editor中的js库,我不知道是js源码不全的问题,还是我引用的不对,结果编辑器都 出不来了,能提供下更全点js库下载地址吗 ?

4 楼 yiminghe 2010-12-26  

yanghj_eye 写道

请问下,如果引用 远程库js的话,能不能自定义配置表情呢?

目前不能，你可以提个配置接口：

不过一般表情是张大图：
http://a.tbcdn.cn/sys/wangwang/smiley/sprite.png

以及一些小图：
http://a.tbcdn.cn/sys/wangwang/smiley/48x48/0.gif

3 楼 yanghj_eye 2010-12-25  

请问下,如果引用 远程库js的话,能不能自定义配置表情呢?

2 楼 jAmEs_ 2010-12-22  

1 楼 liuweifeng 2010-09-20  

支持！！！