富文本编辑器---笑脸表情（一）

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

参考：司徒正美的博客

实例：