淘宝开源编辑器KISSY Editor试用报告

前几天淘宝发布了自己的富文本编辑器KISSY Editor，主要开发者是TaobaoUED的前端工程师玉伯，网上的可视化富文本编辑器众多，本人前段时间也因为要做一个论坛，尝试过在网页中整合这些已有的编辑器（因为自己实在写不出来啊…… =.= ）。网上已有的编辑器基本试了个遍，最后选定了人人网的实现方式——自写插件整合TinyMCE。不仅参考了他们的源代码，而且很无耻地盗链了xnimg.cn上的 js 文件（示例 发布后又发现了一些bug，还没来得及修正）。咳咳，只是学习学习而已，还望淫淫的同学不要来追究我的责任。

作为行业标杆的淘宝前端放出自己的开源编辑器，当然要关注一下。

首先简要评价一下我用过的一些编辑器（比较八卦，技术牛人请自动跳过）：

1. CKEditor 以前的FCKEditor，最老牌的JavaScript RTE之一，换名字后的新网站很漂亮，但是皮肤比较丑，所以我自己做站肯定不会用他。目前在用CKEditor或FCKEditor的网站包括译言、cnBeta、百度空间等…
2. TinyMCE 界面很优雅，最出名的应用就是WordPress后台的文章编辑页面了… 文档完善，自定义插件也相当容易。这大概也是人人网选用TinyMCE的一大原因。
3. Google Docs的编辑器 岂可用“强大”二字形容。必须说“很好很强大”…. 不过我辈只有观瞻的分，人家没有开源，开了源你也用不上…
4. QQ邮箱的编辑器 小巧而强大，但用户体验欠佳。而且英文版的时候，在Firefox下是一塌糊涂……（不知道现在修正过来没有）
5. QQ空间的编辑器 一些交互细节值得称道，但可用性不敢恭维。
6. 搜狐白社会的编辑器 简单的功能造就了迅猛的加载速度。icon有点丑。=.=
7. Discuz的编辑器 完全就是一个怪物。

此外，还有NicEdit、openwysiwyg等独立js编辑器，和一些基于类库的编辑器。jQuery有jwysiwyg (读作/dʒei’wiziwig/)，YUI有YUI RTE，mootools也有wysiwyg插件，不过好像都缺少后续更新。还是TinyMCE和CKEditor比较活跃啊~

淘宝此次发布的编辑器，基于YUI构建，而且是YUI 2.x，诚如“摇滚肉包子”所言，这多多少少会给编辑器的推广带来一些阻碍。但到底好不好用呢？还是试过之后才知道：

1. 界面

现在这款皮肤，和Google Docs很接近，字体颜色拾取器也是借鉴了Google Docs，很好用。总体来说清新舒爽，不油不腻，简洁实用…  不过不太喜欢字体下拉菜单的蓝色：

这是绝对的链接色。这种菜单，用黑色就很好：

（弹出层和按钮左侧有两个像素的距离，我不知道作者是不是故意不对齐的。）

期待淘宝UED的视觉设计达人们能加入到后续版本的开发中，设计出一套更加漂亮的皮肤来。感觉淘宝整站的这种“外凸渐变”实在太多了，不够elegant…

据说插入链接/图片的浮动层样式参考了搜狐白社会，十分紧凑，适合这种小巧的社区发帖编辑器。

2. 功能

目前只实现了一些常用的编辑器功能，字体样式、图片和链接插入、缩进和对齐等。没有清除样式的按钮，直接添加标题（h1~h6）、引用（blockquote）等语义化标签的按钮也没有，从Word中复制内容得到的html源码也十分混乱。不过通过查看js源码，可以看出作者预留了很多接口，底层代码也算是博采众长，插件和皮肤和的自定义还算方便。

作者透露的开发计划是：

紧接着的二期里，将进一步完善基础架构和插件体系，并提供 Undo/Redo, 插入Flash, 表格编辑和预置模板等功能。

另外一些细节，比如说插入图片时URL没有基本的正则验证，当没有p标签包裹时按回车键只会出现br换行，字体的样式和颜色是使用的font标签来设置，等等…… 可能会让一些细节控/语义控觉得受不了。

更多bug和改进建议可以参考updates list。（话说淘宝影响力就是大啊，发布不过一周，提交的bug已经近80个了…）

3. 浏览器兼容

稍微测试了一下，发现的问题有：

1. ie和ff之外的浏览器不能使用图片大小重设
2. opera里缩进按钮失效
3. ie中把图片右对齐，会出现烦人的横向滚动条
4. …

更多兼容性问题，请继续参考updates list…..

4. 大小

KISSY以“小巧灵活，简洁实用”为开发理念，功能实现上遵循着实用主义，但是又保持了相当高的灵活性和可扩展性。

KISSY Editor依赖于YUI的yahoo-dom-event，两者压缩到一个文件后的大小为94k，而TinyMCE在同样的压缩规则下大小为162k。相比于TinyMCE强大的功能，KISSY的尺寸似乎略显臃肿… 对广大站长的号召力似乎不是很大。yahoo-dom-event占到总代码量的近2/3，不知道如果让KISSY独立起来，总代码量会减少多少？

很早以前我就想要一个jQuery版的TinyMCE，因为那得节省多少代码啊~  KISSY Editor还这么新，不知道有没有可能从一开始就整一系列基于多类库的版本？（哇… 类库，内裤，这个词好….）同步开发应该好维护些，不然以后代码庞大起来，要转移内裤就更难搞了。

5. 性能

把插件弹出层的HTML代码写到js里，真是一个好idea… 非常受不了WordPress后台那基于远程HTML文档的模态窗口，网速慢的时候，插入链接这么简单的操作，都要等十秒以上……

至于KISSY这个编辑器的内存占用、代码洁净程度等需要高强度测试的高科技问题，就还是等其他牛人来搞啦… 笔者没有这个水平。

报告完毕！———~—~–~–~-~–妖艳的分割线–~-~–~–~——–

即刻试用KISSY Editor |  在Google Code上的项目主页 在 GitHub 上的KISSY项目主页 |  开发者博客