富文本编辑器(web编辑器)开发原理
现在网上有很多优秀的富文本编辑器,有百度的,各大论坛,反正用到文本编辑的都有,像博客园的后台的富文本编辑器,各种的不一样.但核心还是离不开那几个原理.
今天就讲下几个核心的知识要点,会了这几个,简单的文本编辑器就可以自己完成了,复杂的还涉及很多,多种功能,各种兼容问题等, 美化问题等等.
知识点
1.iframe 对象的运用
2.元素变为可编辑
3.ranges 对象(对选中文本处理)
4.execCommand 命令
5.兼容(IE怪胎)
6.扩展,各种功能...
1.iframe
现在的编辑器都是编辑就可以看到效果,就是试用iframe对象来创建一个内置页面进行编辑,而代码试图则是普通的文本域
我们可以把iframe 当做是普通的元素,可以使用getElementById(),来获取iframe 的引用,这里我们是要自己创建iframe对象,还需要内置网页的winodw对象和docment对象.
主要就是四个对象,iframe,iframe的window,iframe的docment,文本域对象.
首先我们先创建iframe对象
var iframe = document.createElement("iframe");
然后可以设置id,name,还有css...这里可以忽略...
iframe.id = "iframe"; iframe.name = 'iframe'; iframe.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%"; iframe.frameBorder = 0; iframe.scrolling = 'auto'; iframe.style.overflow = 'scroll'; iframe.style.overflowX = 'hidden';
现在这是关键的,取iframe对象页面里面的window 和docment
var _win = iframe.contentWindow || iframe; var _doc = iframe.contentDocument || iframe.contentWindow.document;
这就可以成功去的win,和doc对象了.
2.元素可编辑
(这里说下iframe的可以变和普通元素的可编辑属性不一样)
designMode属性是属于继承...改元素下面的元素都是变为可编辑.
???属性则是把元素单独变为可编辑
下面就把iframe对象设置为可以编辑,然后写入页面.这样一个可编辑的页面就完成了.
_doc.designMode = "on"; /*设置为可编辑模式*/ /*创建*/ _doc.open(); _doc.write('<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><\/head><body style=\"font-family:arial; font-size:13px;background:#fff;margin:10px 0 5px 0;padding: 0;width:100%;height:100%;word-wrap:break-word;cursor:text;\"><\/body><\/html>'); _doc.close();
以上就是可编辑元素的部分...完整的流程并不是这样的.这只是说明某部分的功能....有点乱.
3.ranges对象
标准现代游览器就是该对象,IE则是另外一个对象.才可以获取到文本的值,还有很多的不兼容...处理起来有点麻烦.
4.execCommand 命令
execCommand 命令是结合可视化试图才有效,代码试图并不使用这个,这个命令也比较多,基本的功能都是靠它了,也是最核心的命令,没了它,一切皆不可能.
5.兼容
还是IE的怪胎让我们有点麻烦,在ranges对象会对选中文本再点其他,便失去光标焦点....
...下面开始正式流程.
一般我们是根据文本域对象为核心,进行包装.
===
完整代码包:附件
