富文本编辑器---笑脸表情（一）
这部分是利用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>
