可视化编辑器的开发心得

luolonghao

浏览: 119164 次
性别:
来自: Shanghai

最近访客更多访客>>

lgx2351

bukebuhao

su1216

andyz

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

KindEditor

浏览器 IE Chrome Opera Firefox

到现在为止专心开发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的使用例子。

<p><strong>[粗体</strong>]内容<img src="" /></p>

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

<p><strong>粗体</strong>内容[<img src="" />]</p>

开始节点：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，这样可以做到输入什么显示什么的效果。

分享到：

创建了KindEngine项目，专门用于可视化编辑 ... | 接下来的KindEditor开发计划

2009-12-20 02:13
浏览 4657
评论(23)
论坛回复 / 浏览 (23 / 16728)
分类:Web前端
查看更多

23 楼 cuixiping 2010-05-26

我也在造这个重复的轮子，公司的产品里面用到。
如果只有IE8+，Firefox3+，我可以多活十年。
中国特色的是，IE6很多，腾讯TT很多，遨游很多，GreeBrowser很多，弄得我超级郁闷。
比如说腾讯TT，编辑器插入图片，总会插入到最前面，似乎是记不住焦点的位置，用CKEditor在TT下也是有这个BUG。还有遨游等，虽然是IE内核，但对某些事件模型的处理与IE有别，导致一些事件甚至无法捕获，苦不堪言。熟料公司偏偏非让我去实现，因为客户是上帝，程序员是草芥。

22 楼 hfzhangchain 2010-04-07

kindeditor跨域跨域上传图片么？

21 楼 luolonghao 2009-12-28

vb2005xu 写道

谢谢楼主的回付,不过你这段代码并没有问题啊,我使用的ff也是2.0,见下图

可能这端代码太简单了。我遇到的情况是感觉iframe的DOM还没创建完，逼我使用setTimeout

20 楼 playfish 2009-12-28

我觉得在处理兼容性问题上，楼主可以参考yahoo的策略，给浏览器进行分级来适应。什么级别的浏览器必须达到一个什么程度的适应性。

关于chrome，opera，firefox，我觉得低版本的这些浏览器是可以极大降级的。一般使用这些浏览器的用户，在软件发布新版本的时候都会很快就更新到新版本，尤其(chrome)。不像IE6。。领了风骚十几年。。firefox2我也认为是可以放弃的用户。

为了3%的用户投入50%的精力，不值得。。

19 楼 vb2005xu 2009-12-28

谢谢楼主的回付,不过你这段代码并没有问题啊,我使用的ff也是2.0,见下图

18 楼 luolonghao 2009-12-23

vb2005xu 写道

请教lz一个问题啊: 你说. Firefox 2上创建iframe文档后不能马上操作iframe的DOM ,是指什么意思呢?

我这段代码真没解释呢?
build_ifr: function(){
var eo_ifr = xu.dom.EObject.create('iframe');
eo_ifr.appendTo($TagN('body')[0]);
eo_ifr.attr({id: this.panel}).css({'border': 0,'width': 0,'height': 0,'display':'none'});
}

我碰到的问题是：

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var iframeWin = iframe.contentWindow;
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.designMode = "On";
iframeDoc.open();
iframeDoc.write('<html><head><title>aa</title></head><body></body></html>');
iframeDoc.close();
iframeDoc.body.innerHTML = 'aaa'; //在Firefox 2上这里报错

17 楼 vb2005xu 2009-12-23

16 楼 luolonghao 2009-12-23

night_stalker 写道

Opera 的 textarea 设为不可编辑时，不显示光标和选区并且不能用方向键 ……
而且 selection range 的字符计数不一样 ……

Opera太难对应了 ... ...

15 楼 night_stalker 2009-12-22

Opera 的 textarea 设为不可编辑时，不显示光标和选区并且不能用方向键 ……
而且 selection range 的字符计数不一样 ……

14 楼 luolonghao 2009-12-21

moyue 写道

如果要做不同浏览器不同js代码，检测最好用对象检测，不要用浏览器检测，这样更准确。

不用浏览器检测要看情况的，主要是Opera，记得有好几个IE的接口。

13 楼 moyue 2009-12-21

如果要做不同浏览器不同js代码，检测最好用对象检测，不要用浏览器检测，这样更准确。

12 楼 luolonghao 2009-12-21

Army 写道

正则主要格式化什么东西？

取得HTML用innerHTML取得的,出来的HTML不符合XHTML标准。当然对最后输出结果没什么要求的话直接用也可以，难看是难看了点。

11 楼 Army 2009-12-21

正则主要格式化什么东西？

10 楼 luolonghao 2009-12-21

Army 写道

听上去似乎有点像jindw说的“局部刷新”，根据操作重新生成这一块儿的html。

那么性能如何呢？尤其在富文本量过大的情况？

大部分情况下基本都对选中范围进行操作，修改HTML性能不会有问题的。最后输出HTML得用正则格式化，这里有一些性能瓶颈，但一般大小的页面基本没问题。

9 楼 Army 2009-12-21

听上去似乎有点像jindw说的“局部刷新”，根据操作重新生成这一块儿的html。

那么性能如何呢？尤其在富文本量过大的情况？

8 楼 luolonghao 2009-12-21

因为在iframe里的文档也是document，和普通的document操作一样，用range,node就可以修改任何HTML。

7 楼 Army 2009-12-21

引用

最新的ckeditor基本完全不用execCommand了

那么它是用什么？

6 楼風一樣的男子 2009-12-21

嗯，这个不错，google 的就是这样搞的

5 楼 southgate 2009-12-21

可不可以把js做成for IE ,for FF....不同的浏览器不同的包呢
用后台判断出到底是什么类型的浏览器，再进行加载
这样可以减少js大小，把罗里罗嗦的判断代码去掉

4 楼 jejwe 2009-12-21

KindEditor要是支持table的自定义就好了。这样可以做自定义表单了。之前扩展了KindEditor。推荐给公司的OA组用做编辑器。最后他们换了FCK。主要是因为在COPY WORD内容时速度非常慢

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论