读书人

可视化编辑器的开发经验

发布时间: 2012-11-22 00:16:41 作者: rapoo

可视化编辑器的开发心得
到现在为止专心开发KindEditor积累了一些经验,想和大家分享一下编辑器开发心得,希望越来越多的开发者加入到编辑器开发队伍里。

1. 测试环境
开发基于浏览器的编辑器最痛苦的事情是解决各浏览器的兼容性,刚开始每次添加功能或修改功能IE6到8、Firefox2和3、Safari、Chrome、Opera都测试一遍,后来总结出来经验,只测试IE8、Firefox 3、Chrome,最后发布前再测试其它浏览器。
IE 6、7、8:DOM操作方面基本都一样,UI方面需要注意quirks mode(怪异模式)和strict mode(严格格式),用IE8自带的开发人员工具(按F12就出来)可以修改成怪异模式。
Firefox 2、3:区别还是蛮大的,主要碰到的问题是创建iframe文档的时间点不一样,Firefox 2上创建iframe文档后不能马上操作iframe的DOM,用setTimeout延迟操作就没问题。
Chrome和Safari:因为都用Webkit,Chrome没问题的话Safari也没问题。
Opera:支持可视化最烂,而且每次升级很不稳定,记得10 beta版本根本不能使用9上面正常运行的编辑器。现在支持Opera的原则是能使用就可以,不再研究细节问题了。

2. execCommand和range
开发可视化编辑器最重要的接口是execCommand,现在大多数编辑器或多或少都依赖这个函数,轻量级编辑器绝大多数功能都要依靠它。execCommand最初IE上实现,后来其它浏览器也陆续支持execCommand。execCommand虽然很优秀,但每个浏览器生成不同的HTML代码,很难控制最后输出结果,最新的ckeditor基本完全不用execCommand了。
弥补execCommand缺点的技术是range和selection。range是一个HTML的范围,并提供一些方法来操作HTML范围,比如删除、复制、提取一段HTML。
IE和其它非IE浏览器range接口完全不同,如果range操作比较多的话最好自己写一个统一的类库。IE的range是基于文本和控件的(textRange和controlRange),非IE的range是W3C规范里的range,有开始节点和结束节点的位置,可以精确的操作DOM,下面是W3C range的使用例子。


开始节点:textNode - 粗体
开始位置:0
结束节点:textNode - 内容
结束位置:0


开始节点:textNode - 内容
开始位置:2
结束节点:p node (因为img node后面没有textNode,所以只能用父节点的子节点位置来描述。)
结束位置:3

3. 后退/撤销
开发编辑器还有一个要解决的问题是undo/redo,在IE上iframe的undo记录和外部document的undo记录是在一起的,任何一个对外部document的变更会失去undo记录。
目前KindEditor用最原始的全文保存方法,每次修改内容时把html保存到一个数组里,这么做代码非常简单,但无法保存选中状态,我目前还没找到合适的解决方案。

4. 删除格式
execCommand有一个removeformat命令,这个命令在IE上有一个缺陷,就是不能删除span。要解决这个问题只能自己实现这个功能,原理是先切割选中范围的开始节点和结束节点,然后遍历node删除中间的样式标签。

5. URL格式
在IE上相对路径自动变成包括域名的绝对路径,如果用户需要将测试环境的数据导入到正式环境就有问题了。解决方法是根据location.host正则匹配重新修改成相对路径。
2009-12-23补充:更好的方法是把URL保存在自定义属性里,比如<img my_src="test.gif" src="test.gif" />,最后输出时用my_src重置src,这样可以做到输入什么显示什么的效果。
可能这端代码太简单了。我遇到的情况是感觉iframe的DOM还没创建完,逼我使用setTimeout 22 楼 hfzhangchain 2010-04-07 kindeditor跨域跨域上传图片么?
23 楼 cuixiping 2010-05-26 我也在造这个重复的轮子,公司的产品里面用到。
如果只有IE8+,Firefox3+,我可以多活十年。
中国特色的是,IE6很多,腾讯TT很多,遨游很多,GreeBrowser很多,弄得我超级郁闷。
比如说腾讯TT,编辑器插入图片,总会插入到最前面,似乎是记不住焦点的位置,用CKEditor在TT下也是有这个BUG。还有遨游等,虽然是IE内核,但对某些事件模型的处理与IE有别,导致一些事件甚至无法捕获,苦不堪言。熟料公司偏偏非让我去实现,因为客户是上帝,程序员是草芥。

读书人网 >Web前端

热点推荐