一步步教你实现富本文编辑器(第二部分)

这部分是利用iframe实现我们的富文本编辑器。上面提到激活编辑模式有两个方法,contentEditable="true"与designMode="On"。contentEditable 是针对单个元素,而designMode是面向整个文档的。因此,当我们使用iframe时,我们得先取到iframe的document。

1. var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

不过,在这之前,我们首先动态生成iframe,然后再对iframe进行一些样式设置,插入到原textarea之前,既然有了iframe作为我们输入的场所,那么我们就没有必要留着textarea占着空间,我们把它隐藏便是。最后,我们用iframeDocument执行execCommand()就圆满了……下面是以上过程的代码

01.    
02.    //***********************************************************    
03.     var textarea = document.getElementById("textarea");
04.     textarea.style.display = "none";
05.     var iframe = document.createElement("iframe");
06.     iframe.style.width = "390px";
07.     iframe.style.height = "100px";
08.     iframe.frameBorder=0;
09.     textarea.parentNode.insertBefore(iframe,textarea);
10.     var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
11.     iframeDocument.designMode = "on";
12.     iframeDocument.open();
13.     iframeDocument.write('<HTML><HEAD>');
14.     iframeDocument.close();
15. //***********************************************************

嗯,基本上,所有常见游览器都能正常编辑文本了,除了FF有一个地方需要修正。在FF下,当我们试图改变文本的背影色时,发现整个iframe都变色了,原来FF的backcolor是针对文档的body元素的,要想和IE一致,我们需要用到hilitecolor,它才是针对我们选中的文本进行背景色设置。因此,修正如下:

01. for(i=0,l=selects.length;i < l;i++){
02.   selects[i].onchange = new function(){
03.     var select = selects[i];
04.     return function(){
05.       var command = select.getAttribute("title"),
06.       value = select.options[select.selectedIndex].value;
07.       if(command == 'backcolor' && /a/[-1]=='a'){
08.         iframeDocument.execCommand('hilitecolor',false,value);
09.       }else{
10.         iframeDocument.execCommand(command,false,value);
11.       }
12.     };
13.   };
14. };

其中 /a/[-1]=='a' 是用来嗅探浏览器是否为FF。

接着下来我们实现一下插入命令,如插件图片,插入表格等等。这个相对复杂些,我们还是可以利用execCommand命令,但对于表格,我们得另寻他法了!我们先实现一些相对简单的吧!

修改表现层,增加命令按钮。

01.    
02. <div id="editor">
03.   <!--         前略         //-->
04.   <select title="backcolor">
05.     <option style="color:#000000" value="#000000">■■</option>
06.     <option style="color:#FF8080" value="#FF8080">■■</option>
07.     <option style="color:#FFFF00" value="#FFFF00">■■</option>
08.     <option style="color:#80FF00" value="#80FF00">■■</option>
09.     <option style="color:#00FFFF" value="#00FFFF">■■</option>
10.     <option style="color:#0000FF" value="#0000FF">■■</option>
11.     <option style="color:#FF00FF" value="#FF00FF">■■</option>
12.   </select>
13.   <span class="button" title="createlink" unselectable="on">链接</span>
14.   <span class="button" title="insertimage" unselectable="on">图片</span>
15. </div>

然后我们在点击这两个按钮时,弹出一个Promp窗口,让人们输入链接就是!

01. for(var i = 0,l= buttons.length;i<l;i++){
02.   buttons[i].onclick = new function(){
03.     var command=buttons[i].getAttribute("title");
04.     return function(){
05.       if(command == 'createlink' || command == 'insertimage'){
06.         var value = prompt('请输入超链接:', 'http://');
07.         iframeDocument.execCommand(command,false,value);
08.       }else{
09.         iframeDocument.execCommand(command,false,'');
10.       }
11.     }
12.   };
13. };

至于更复杂的插入,需要取得编辑光标的位置,这是个很麻烦的问题,我们留待pure DOM实现时才搞这个,现在我们试试提交内容。这个流程大抵是这个样子,当我们的iframe失去焦点(onblur)时,我们就偷偷把iframe里的内容拷贝到textarea中去,那么当我们提交时textarea里就有东西了!这看起来很简单,但当中的兼容问题会搞死一大班人!

为了说明这个问题,我们做如下实验——

1. iframe.onblur = function(){
2.          //执行绑定事件
3. }

IE正常,其他游览器没反应,难道我们绑定事件的方式不对吗?!没办法,奠出我们的addEvent函数!

嘿嘿,真是该死,W3C那帮家伙照旧没反应!遍历他们的iframe对象,发现它们是有blur与focus等方法,不过都是幌子,一个空实现!揭开谜底吧,在W3C标准中,iframe对象是不绑定任何事件,全部下放到其contentWindow中,并且以前onXXXX这样兼容写法也无效了,标准到底,我们要用标准的addEventListener函数才能请得动它!而要取得iframe的内容,其实就是取得其body的内容。

1. var deliver = function(iframe){
2.     addEvent(iframe.contentWindow,'blur',function(){
3.         var tip = document.getElementById("exe");
4.         iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
5.         tip.innerHTML = "失去焦点,并取得iframe的内容为:"+iframeDocument.body.innerHTML
6.         tip.style.backgroundColor = "#9999CC";
7.     })
8. }

接着我们试图取得其编辑后的源码,也就是切换到HTML模式了。不用说HTML模式只能在textarea中显式,我们做一个按钮,用于隐藏与显示iframe与textarea就行了!

01.    
02. if(switchEditMode){//切换到textarea
03.     iframe.style.display = "none";
04.     textarea.style.display = "block";
05.     textarea.value = iframeDocument.body.innerHTML;
06.     textarea.focus();
07.     switchEditMode = false;
08. }else{//切换到iframe
09.     iframe.style.display = "block";
10.     textarea.style.display = "none";
11.     iframeDocument.body.innerHTML = textarea.value;
12.     iframe.contentWindow.focus();
13.     switchEditMode = true;
14. }

好了,这部分就到此为止,下次我们将对它进行封装,并实现更为复杂的插入!

根据 W3C标准click 方法只能赋予 input 元素。参考:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025

你可能感兴趣的:(编辑器)