這部分是利用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].οnclick=
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>
與50位技術專家面對面20年技術見證，附贈技術全景圖
總結
以上是生活随笔為你收集整理的富文本编辑器---笑脸表情（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
