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

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

</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，它才是针对我们选中的文本进行背景色设置。因此，修正如下：

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,'');
      }
    }
  };
};

</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里就有东西了！这看起来很简单，但当中的兼容问题会搞死一大班人！

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

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

<!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的内容。

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";
    })
}

<!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就行了！

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;
}

<!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>

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