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

这部分是利用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>
posted @ 2012-10-07 00:33  前端咖  阅读(5504)  评论(0)    收藏  举报