编辑器（ckeditor篇)

最近一直超级忙，忙着研究编辑器，研究了一段时间，出来跟大家分享一下我的心得

ckeditor她太好了，因为他开源，并且做的很强大（源码不压缩7万多行），之所以研究她是因为，一般我们做编辑器基本都是靠execCommand命令来实现的
缺点不用说，兼容性不好，就是同个浏览器不同版本也有差别，所以ck她自己实现了execCommand的各个命令，当然在她的最新的truck中也稍微有一点是用的原生的，但他标志为todo，呵呵

如果你想研究ck编辑器，那让小弟先来介绍一下他的核心的几个类
_source下的dom是最基础的实现了
因为在编辑器的世界里，textNode 是你打交道最多的元素了，但是很多框架这个都是忽略的，而且如果你用那你杯具了肯定报错，比如contains,之类的
所以在ck中设计了一套底层的核心代码来做这个事情

基类domobject他是根，实现什么自定义事件绑定啦，触发了什么的
继承他的是node这个是包括element, text , document的类，他实现了一些公共的方法，比如getNext,getPrevious之类的
他之下就是
        element text document(因为编辑器都是iframe这个document是iframe中的document) window同左iframe中的window

range这个太重要了，做编辑器必须的，就跟你要上wc要有手纸一样，他的作用就是体现你现在选中了那，光标在哪，等等

walker  这个也很有用，看名字就是走，按着一定的规制便利编辑器中的dom树

dtd 这个也肥肠肥肠的重要，看了他的代码感觉他也是从别人那扒来的，所以都是a b c这样的，这个告诉你那个元素他是块结构的，那个是inline的，那个能放在那个下，那个不能
比如<b>能发在p下,但你不能把p放在b下

还有几个没在他的他的core,但也肥肠重要
放在了plugin下
是
selection这个是range的亲爹，没有他你就不能找到代表你选中的那个range,(当然range是可以new 的，但new的range是什么都不选的,就是跟你当前的页面的状态无关，就是Range类)

style 这个也老有用了，简单的说就是你想把选中的文字加粗，那么就是range.js里的方法，把你的选中的生成的相应的range对象给style，style负责对这个range进行分析和加粗


好了上边几个js就基本上是ck来实现execCommand的原生命令的核心代码了，如果你想搞编辑器，那上边的你必看（虽然觉得你是傻子，因为你要搞编辑器，编辑器这个东西基本就是bug满天飞的东西)

接下来跟大家说说当然你选中一段文字时，你点b她就加粗了，后台的实现机制，我先聊个大致的，以后在慢慢和大家分享，我了解的细节的东西，比如range.js里的每个方法是做什么的

当你选中一段文本后，通过得到selection在通过selection 得到range
这里细说一下range
在ie下range是只有一个，但在除了ie以外的浏览器中range是可以多个的

range有几个比较基本的属性（javascript高级编程这本书介绍过这个但说的有点晕)
startContainer 开始范围的容器
startOffset 开始在范围中的位置

比如哦
<p><b>xxxx[sxxx</b>xxxxx]exxxx</p>
这样一个选区
[]表示我选的位置

我的开始在一个文本的中间，那么我的startContainer就是b下的这个xxxxxxxx的文本节点
那我的startOffset是4因为是从4这个字符开始的

注意有时xxxx 和sxxx是两个节点，虽然我们在页面上看不出来，但在dom树下是有这样的情况的
那么我的startContainer/startoffset就可以变化了

startContainer可以是b 这个节点，startOffset是1
表示是从b下的第一个（就是sxxxx这个）文本节点开始

也可以是startContainer是sxxx这个文本节点,startOffset是0
表示的是sxxxx这个文本节点的第0个字符开始

累死了，不知道我说明白了没
同理endContainer/endOffset也是这个道理
上边的选区的结束是endContainer是p endOffset是2(假设 xxxxx]exxxx 已经是两个节点了，当然也可以是一个，那么就是endContainer是这个文本几点，endOffset是5 注意是选区后面的那个）

collapsed合并，这个书上说的晕死一大堆话
其实就是
xxxxxx|xxxxx这个就是合并
range对象的体现就是
startContainer==endContainer
startOffset == endOffset

好了range得到了，然后交给style，style根据你要加的操作（加粗）来判断你的这个range上的节点是否能发在b/strong里能就从dom树上扣下这些节点放在documentFragment里，然后创建一个b
在appendChild，在插回到dom树上，如果不行，那就从开始的位置上一点一点的细分range，等于是把range切成小块，然后再做上述操作，分别加b


基本的操作就是这样了，好了，这次，是个抛砖头，下次分别聊，跟大家分享，编辑器这个东东，要聊的太多了

评论

1 楼 pinklover 2010-08-28  

你好，我想请教一下，我该如何使用js实现在一个页面点击ok后，把某个值填入到插入图片那个弹出框中的替代文本框中呢？那个页面时由图片插入框的某个按钮调用出来，用来选中某个图片，并返回url值的。