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

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

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

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

 
   //***********************************************************    
    var textarea = document.getElementById("textarea");
    textarea.style.display = "none";
    var iframe = document.createElement("iframe");
    iframe.style.width = "390px";
    iframe.style.height = "100px";
    iframe.frameBorder=0;
    textarea.parentNode.insertBefore(iframe,textarea);
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    iframeDocument.designMode = "on";
    iframeDocument.open();
    iframeDocument.write('');
    iframeDocument.close();
//***********************************************************

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

 
    for(i=0,l=selects.length;i < l;i++){
      selects[i].onchange = new function(){
        var select = selects[i];
        return function(){
          var command = select.getAttribute("title"),
          value = select.options[select.selectedIndex].value;
          if(command == 'backcolor' && /a/[-1]=='a'){
            iframeDocument.execCommand('hilitecolor',false,value);
          }else{
            iframeDocument.execCommand(command,false,value);
          }
        };
      };
    };

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

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

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

 
<div id="editor">
  <!--         前略         //-->
  <select title="backcolor">
    <option style="color:#000000" value="#000000">■■</option>
    <option style="color:#FF8080" value="#FF8080">■■</option>
    <option style="color:#FFFF00" value="#FFFF00">■■</option>
    <option style="color:#80FF00" value="#80FF00">■■</option>
    <option style="color:#00FFFF" value="#00FFFF">■■</option>
    <option style="color:#0000FF" value="#0000FF">■■</option>
    <option style="color:#FF00FF" value="#FF00FF">■■</option>
  </select>
  <span class="button" title="createlink" unselectable="on">链接</span>
  <span class="button" title="insertimage" unselectable="on">图片</span>
</div>

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

 
    for(var i = 0,l= buttons.length;i<l;i++){
      buttons[i].onclick = new function(){
        var command=buttons[i].getAttribute("title");
        return function(){
          if(command == 'createlink' || command == 'insertimage'){
            var value = prompt('请输入超链接:', 'http://');
            iframeDocument.execCommand(command,false,value);
          }else{
            iframeDocument.execCommand(command,false,'');
          }
        }
      };
    };

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

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

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

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

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

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

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

 
if(switchEditMode){//切换到textarea
    iframe.style.display = "none";
    textarea.style.display = "block";
    textarea.value = iframeDocument.body.innerHTML;
    textarea.focus();
    switchEditMode = false;
}else{//切换到iframe
    iframe.style.display = "block";
    textarea.style.display = "none";
    iframeDocument.body.innerHTML = textarea.value;
    iframe.contentWindow.focus();
    switchEditMode = true;
}

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

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

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