一步步教你实现富本文编辑器（第二部分）-优快云博客

这部分是利用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.
    //***********************************************************

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> #editor{ float:left; width:380px;background:#D5F3F4;padding-left:10px; } #editor span.button{ display:block;float:left;border: 1px solid #CCC;margin:1px 5px 1px 0px ;color: #000; background: #D0E8FC;width:40px;height:20px;text-align:center; } #editor select{ display:block; float:left;height:20px;width:60px;margin-right:5px;} #textarea {width:382px;height:100px;} </style> <script type="text/javascript"> window.onload = function(){ var editor = document.getElementById("editor"); var buttons = editor.getElementsByTagName("span"); var selects = editor.getElementsByTagName("select"); //*********************************************************** 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('<html><head></head><body bgcolor="#DDF3FF"></body></html>'); iframeDocument.close(); //*********************************************************** for(var i = 0,l= buttons.length;i<l;i++){ buttons[i].onclick = new function(){ var command=buttons[i].getAttribute("title"); return function(){ iframeDocument.execCommand(command); } }; }; 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; iframeDocument.execCommand(command,false,value); }; }; }; } </script> <title>富文本编辑器</title> </head> <body> <form action="#"> <div id="editor"> <span class="button" title="bold" unselectable="on">加粗</span> <span class="button" title="italic" unselectable="on">斜体</span> <span class="button" title="underline" unselectable="on">下划</span> <span class="button" title="justifycenter" unselectable="on">居中</span> <span class="button" title="justifyleft" unselectable="on">居左</span> <span class="button" title="justifyright" unselectable="on">居右</span> <span class="button" title="outdent" unselectable="on">悬挂</span> <span class="button" title="indent" unselectable="on">缩进</span> <span class="button" title="insertunorderedlist" unselectable="on">无序</span> <span class="button" title="insertorderedlist" unselectable="on">有序</span> <select title="fontname"> <option value="SimSun">宋体</option> <option value="LiSu">隶书</option> <option value="KaiTi_GB2312">楷体</option> <option value="YouYuan">幼圆</option> <option value="SimHei">黑体</option> <option value="Microsoft YaHei">雅黑</option> <option value="Comic Sans MS">Comic Sans MS</option> </select> <select title="fontsize"> <option value="1">特小</option> <option value="2">很小</option> <option value="3">小</option> <option value="4">普通</option> <option value="5">大</option> <option value="6">很大</option> <option value="7">特大</option> </select> <select title="forecolor"> <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> <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> </div> <br style="clear:both"/> <textarea id="textarea"></textarea> </form> </body> </html>

运行代码

嗯，基本上，所有常见游览器都能正常编辑文本了，除了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.
    };

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> #editor{ float:left; width:380px;background:#D5F3F4;padding-left:10px; } #editor span.button{ display:block;float:left;border: 1px solid #CCC;margin:1px 5px 1px 0px ;color: #000; background: #D0E8FC;width:40px;height:20px;text-align:center; } #editor select{ display:block; float:left;height:24px;width:60px;margin-right:5px;} #textarea {width:382px;height:100px;} </style> <title>富文本编辑器</title> </head> <body> <script type="text/javascript"> window.onload = function(){ var editor = document.getElementById("editor"); var buttons = editor.getElementsByTagName("span"); var selects = editor.getElementsByTagName("select"); 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('<html><head><style type="text/css">body{ font-family:arial; font-size:13px;background:#DDF3FF }</style></head></html>'); iframeDocument.close(); 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,''); } } }; }; 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); } }; }; }; } </script> <title>富文本编辑器</title> </head> <body> <div id="editor"> <span class="button" title="bold" unselectable="on">加粗</span> <span class="button" title="italic" unselectable="on">斜体</span> <span class="button" title="underline" unselectable="on">下划</span> <span class="button" title="justifycenter" unselectable="on">居中</span> <span class="button" title="justifyleft" unselectable="on">居左</span> <span class="button" title="justifyright" unselectable="on">居右</span> <span class="button" title="outdent" unselectable="on">悬挂</span> <span class="button" title="indent" unselectable="on">缩进</span> <span class="button" title="insertunorderedlist" unselectable="on">无序</span> <span class="button" title="insertorderedlist" unselectable="on">有序</span> <span class="button" title="createlink" unselectable="on">链接</span> <span class="button" title="insertimage" unselectable="on">图片</span> <select title="fontname"> <option value="SimSun">宋体</option> <option value="LiSu">隶书</option> <option value="KaiTi_GB2312">楷体</option> <option value="YouYuan">幼圆</option> <option value="SimHei">黑体</option> <option value="Microsoft YaHei">雅黑</option> <option value="Comic Sans MS">Comic Sans MS</option> </select> <select title="fontsize"> <option value="1">特小</option> <option value="2">很小</option> <option value="3">小</option> <option value="4">普通</option> <option value="5">大</option> <option value="6">很大</option> <option value="7">特大</option> </select> <select title="forecolor"> <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> <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> </div> <br style="clear:both"/> <textarea id="textarea"></textarea> </body> </html>

运行代码

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

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

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

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> </style> <script type="text/javascript"> var deliver = function(iframe){ iframe.onblur = function(){ var tip = document.getElementById("exe"); tip.innerHTML = "发生失去焦点（blur）事件了！" tip.style.backgroundColor = "#9999CC"; } } window.onload = function(){ 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('<html><head><style type="text/css">body{ font-family:arial; font-size:13px;background:#DDF3FF }</style></head></html>'); iframeDocument.close(); deliver(iframe); } </script> <title>富文本编辑器</title> </head> <body> <p id="exe"></p> <textarea id="textarea"></textarea> </body> </html>

运行代码

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

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> </style> <script type="text/javascript"> var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { el.addEventListener(type, fn, false); }; } else { return function (el, type, fn) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); } } })(); var deliver = function(iframe){ addEvent(iframe,'blur',function(){ var tip = document.getElementById("exe"); tip.innerHTML = "发生失去焦点（blur）事件了！" tip.style.backgroundColor = "#9999CC"; }) } window.onload = function(){ 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('<html><head><style type="text/css">body{ font-family:arial; font-size:13px;background:#DDF3FF }</style></head></html>'); iframeDocument.close(); deliver(iframe); } </script> <title>富文本编辑器</title> </head> <body> <p id="exe"></p> <textarea id="textarea"></textarea> </body> </html>

运行代码

嘿嘿，真是该死，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.
    }

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> #editor{ float:left; width:380px;background:#D5F3F4;padding-left:10px; } #editor span.button{ display:block;float:left;border: 1px solid #CCC;margin:1px 5px 1px 0px ;color: #000; background: #D0E8FC;width:40px;height:20px;text-align:center; } #editor select{ display:block; float:left;height:24px;width:60px;margin-right:5px;} #textarea {width:382px;height:100px;} </style> <script type="text/javascript"> var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { el.addEventListener(type, fn, false); }; } else { return function (el, type, fn) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); } } })(); 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"; }) } window.onload = function(){ var editor = document.getElementById("editor"); var buttons = editor.getElementsByTagName("span"); var selects = editor.getElementsByTagName("select"); //*********************************************************** 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('<html><head><style type="text/css">body{ font-family:arial; font-size:13px;background:#DDF3FF }</style></head></html>'); iframeDocument.close(); //*********************************************************** 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,''); } } }; }; 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); } }; }; }; deliver(iframe); } </script> <title>富文本编辑器</title> </head> <body> <p id="exe"></p> <div id="editor"> <span class="button" title="bold" unselectable="on">加粗</span> <span class="button" title="italic" unselectable="on">斜体</span> <span class="button" title="underline" unselectable="on">下划</span> <span class="button" title="justifycenter" unselectable="on">居中</span> <span class="button" title="justifyleft" unselectable="on">居左</span> <span class="button" title="justifyright" unselectable="on">居右</span> <span class="button" title="outdent" unselectable="on">悬挂</span> <span class="button" title="indent" unselectable="on">缩进</span> <span class="button" title="insertunorderedlist" unselectable="on">无序</span> <span class="button" title="insertorderedlist" unselectable="on">有序</span> <span class="button" title="createlink" unselectable="on">链接</span> <span class="button" title="insertimage" unselectable="on">图片</span> <select title="fontname"> <option value="SimSun">宋体</option> <option value="LiSu">隶书</option> <option value="KaiTi_GB2312">楷体</option> <option value="YouYuan">幼圆</option> <option value="SimHei">黑体</option> <option value="Microsoft YaHei">雅黑</option> <option value="Comic Sans MS">Comic Sans MS</option> </select> <select title="fontsize"> <option value="1">特小</option> <option value="2">很小</option> <option value="3">小</option> <option value="4">普通</option> <option value="5">大</option> <option value="6">很大</option> <option value="7">特大</option> </select> <select title="forecolor"> <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> <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> </div> <br style="clear:both"/> <textarea id="textarea"></textarea> <p>编辑完，试一下在iframe内外来回点击！</p> </body> </html>

运行代码

接着我们试图取得其编辑后的源码，也就是切换到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.
    }

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> #editor{ float:left; width:380px;background:#D5F3F4;padding-left:10px; } #editor span.button{ display:block;float:left;border: 1px solid #CCC;margin:1px 5px 1px 0px ;color: #000; background: #D0E8FC;width:40px;height:20px;text-align:center; } #editor select{ display:block; float:left;height:24px;width:60px;margin-right:5px;} #textarea {width:382px;height:100px;} </style> <script type="text/javascript"> var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { el.addEventListener(type, fn, false); }; } else { return function (el, type, fn) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); } } })(); 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"; }) } window.onload = function(){ var editor = document.getElementById("editor"); var buttons = editor.getElementsByTagName("span"); var selects = editor.getElementsByTagName("select"); 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('<html><head><style type="text/css">body{ font-family:arial; font-size:13px;background:#DDF3FF }</style></head></html>'); iframeDocument.close(); var switchEditMode = true; for(var i = 0,l= buttons.length;i<l;i++){ buttons[i].onclick = new function(){ var command=buttons[i].getAttribute("title"); return function(){ switch(command){ case 'createlink': case 'insertimage': var value = prompt('请输入超链接:', 'http://'); iframeDocument.execCommand(command,false,value); break; case "html"://查看源码 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; } break; default: iframeDocument.execCommand(command,false,''); iframe.contentWindow.focus(); } }; }; }; 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); } }; }; }; deliver(iframe); } </script> <title>富文本编辑器</title> </head> <body> <p id="exe"></p> <div id="editor"> <span class="button" title="bold" unselectable="on">加粗</span> <span class="button" title="italic" unselectable="on">斜体</span> <span class="button" title="underline" unselectable="on">下划</span> <span class="button" title="justifycenter" unselectable="on">居中</span> <span class="button" title="justifyleft" unselectable="on">居左</span> <span class="button" title="justifyright" unselectable="on">居右</span> <span class="button" title="outdent" unselectable="on">悬挂</span> <span class="button" title="indent" unselectable="on">缩进</span> <span class="button" title="insertunorderedlist" unselectable="on">无序</span> <span class="button" title="insertorderedlist" unselectable="on">有序</span> <span class="button" title="createlink" unselectable="on">链接</span> <span class="button" title="insertimage" unselectable="on">图片</span> <span class="button" title="html" unselectable="on">源码</span> <select title="fontname"> <option value="SimSun">宋体</option> <option value="LiSu">隶书</option> <option value="KaiTi_GB2312">楷体</option> <option value="YouYuan">幼圆</option> <option value="SimHei">黑体</option> <option value="Microsoft YaHei">雅黑</option> <option value="Comic Sans MS">Comic Sans MS</option> </select> <select title="fontsize"> <option value="1">特小</option> <option value="2">很小</option> <option value="3">小</option> <option value="4">普通</option> <option value="5">大</option> <option value="6">很大</option> <option value="7">特大</option> </select> <select title="forecolor"> <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> <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> </div> <br style="clear:both"/> <textarea id="textarea"></textarea> <p>编辑完，试一下在iframe内外来回点击！</p> </body> </html>

运行代码

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

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

转载于:https://www.cnblogs.com/liufei88866/archive/2009/08/03/1537620.html