zoukankan      html  css  js  c++  java
  • 富文本编辑器笑脸表情(一)

    这部分是利用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; 450px; position: relative;}
                .mcont ul{ overflow: hidden;  360px; position: absolute; left:0px; top:-70px; display:none;}
                .mcont li{float:left;_display:inline;  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;  60px; height: 20px; cursor: pointer;}
                .mcont textarea{height:150px;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>
  • 相关阅读:
    Struts2+Spring3+Mybatis3开发环境搭建
    spring+struts2+mybatis
    【LeetCode】Populating Next Right Pointers in Each Node
    【LeetCode】Remove Duplicates from Sorted Array
    【LeetCode】Remove Duplicates from Sorted Array II
    【LeetCode】Binary Tree Inorder Traversal
    【LeetCode】Merge Two Sorted Lists
    【LeetCode】Reverse Integer
    【LeetCode】Same Tree
    【LeetCode】Maximum Depth of Binary Tree
  • 原文地址:https://www.cnblogs.com/kuikui/p/2713475.html
Copyright © 2011-2022 走看看