這部分是利用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(); //***********************************************************
參考：司徒正美的博客
實例：
<!DOCTYPE html>
<html>
<head>
<title>笑臉表情</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
*{margin:0px;padding: 0px;}
ul{list-style: none;}
.cfl{*zoom: 1;}
.cfl:after{content: "\0020";display: block;height: 0;clear: both;overflow: hidden;visibility: hidden;}
.mcont{margin:100px 20px; height: 330px;width: 450px; position: relative;}
.mcont ul{ overflow: hidden; width: 360px; position: absolute; left:0px; top:-70px; display:none;}
.mcont li{float:left;_display:inline; width: 32px; height: 32px; margin: 0px 4px 4px 0px; cursor: pointer;}
.mbar{height: 30px;line-height: 30px; vertical-align: middle; background: #F1F1F1; border:1px solid #666666;}
.mbar input{display:inline-block; width: 60px; height: 20px; cursor: pointer;}
.mcont textarea{height:150px;width:450px;}
</style>
</head>
<body>
<script type="text/javascript">
var dataFace = [
{name:"微笑",msrc:"./images/face/f01.png"},
{name:"大笑",msrc:"./images/face/f02.png"},
{name:"偷笑",msrc:"./images/face/f03.png"},
{name:"酷",msrc:"./images/face/f04.png"},
{name:"鬼臉",msrc:"./images/face/f05.png"},
{name:"流鼻血",msrc:"./images/face/f06.png"},
{name:"色",msrc:"./images/face/f07.png"},
{name:"疑問",msrc:"./images/face/f08.png"},
{name:"羞",msrc:"./images/face/f09.png"},
{name:"囧",msrc:"./images/face/f10.png"},
{name:"萌",msrc:"./images/face/f11.png"},
{name:"鄙視",msrc:"./images/face/f12.png"},
{name:"暈",msrc:"./images/face/f13.png"},
{name:"汗",msrc:"./images/face/f14.png"},
{name:"可憐",msrc:"./images/face/f15.png"},
{name:"靠",msrc:"./images/face/f16.png"},
{name:"委屈",msrc:"./images/face/f17.png"},
{name:"大哭",msrc:"./images/face/f18.png"},
{name:"生氣",msrc:"./images/face/f19.png"},
{name:"拜拜",msrc:"./images/face/f20.png"},
];
window.onload = function(){
var editor = document.getElementById("meditor");
var ul = document.createElement("ul");
var ulHtml = "";
for(var i = 0,l= dataFace.length;i<l;i++){
ulHtml +="<li><img alt='"+dataFace[i].name+"' src='"+dataFace[i].msrc+"' /></li>";
};
ul.innerHTML=ulHtml;
editor.insertBefore(ul, editor.getElementsByTagName("div")[0]);
var textarea = document.getElementById("txt");
textarea.style.display = "none";
var iframe = document.createElement("iframe");
iframe.style.width = "448px";
iframe.style.height = "150px";
iframe.style.border = "1px solid #666666";
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 style="min-height:100px;" bgcolor="#FFFFFF"></body></html>');
iframeDocument.close();
editor.getElementsByTagName("input")[0].onclick=function(){
editor.getElementsByTagName("ul")[0].style.display = "block";
}
var lis = editor.getElementsByTagName("li");
for(var i = 0, l = lis.length; i<l;i++){
lis[i].onclick = new function(){
var choose = lis[i];
return function(){
editor.getElementsByTagName("ul")[0].style.display = "none";
var value = choose.getElementsByTagName("img")[0].src;
iframeDocument.execCommand("insertimage",false,value);
}
}
};
}
</script>
<div id="meditor" class="mcont">
<div class="mbar"><input type="button" value="圖片" /></div>
<textarea id="txt"></textarea>
</div>
</body>
</html>