ITKeyword,专注技术干货聚合推荐

注册 | 登录

编辑器(ckeditor篇)

campaign 分享于

2020腾讯云双十一活动,全年最低!!!(领取3500元代金券),
地址https://cloud.tencent.com/act/cps/redirect?redirect=1073

2020阿里云最低价产品入口,含代金券(新老用户有优惠),
地址https://www.aliyun.com/minisite/goods

推荐:ewebeditor编辑器如何在IE6.IE7.IE8傲游浏览器中兼容

1、用记事本打开ewebeditor包下的editor.js文件,找到如下代码: if (element.YUSERONCLICK) {     eval(element.YUSERONCLICK + "anonymous()"); } 由于eWebEdi

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

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 这个也老有用了,

推荐:一个梦想--编写一个基于浏览器的JavaScript编辑器

为什么这个梦想中的JavaScript编辑器要使用JavaScript本身编写哪? 最大的特色是: 可以利用JavaScript的反射来提供更强的语法提示、自动补全功能; 可以随时运

简单的说就是你想把选中的文字加粗,那么就是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


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

推荐:eWebEditor 在线文本编辑器兼容360安全浏览器,IE7,IE8,遨游

原因是IE7,IE8(360及遨游浏览器用的是IE的内核)不支持anonymous(),所以要换成onclick(event)事件。   解决IE7,IE8,遨游下使用ewebeditor的方法是:找到edi

最近一直超级忙,忙着研究编辑器,研究了一段时间,出来跟大家分享一下我的心得 ckeditor她太好了,因为他开源,并且做的很强大(源码不压缩7万多行),之所以研究她是因为,一般我们做编辑器基

相关阅读排行


相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。