一款支持插入表情的编辑器实现代码(简单思路挺重要)

搞一个带表情输入的编辑器，其实是个挺常见的需求。刚开始可能会想用 textarea 凑合，但很快就会发现——textarea 显示不了图片，这条路走不通。那怎么办？iframe 是个不错的选择，把它的 designMode 打开，就能得到一个可编辑区域，图片、文字都能塞进去。不过 iframe 有个小毛病：默认不会自动换行。所以得给它的 body 加个 word-wrap 属性，让文字能自动折行，不然体验会很糟糕。

先来准备表情列表。最简单的方式就是用 ul 和 li 把表情的图片文件名和对应的 class 标记存起来，比如这样：

0.gif
1.gif
2.gif

接下来，得把这些 li 转换成真正的 img 标签，才能在页面上显示出来。代码很简单：遍历每个 li，创建 img 节点，把 li 的 class 赋给 img，再把 li 里的文本（文件名）拼上目录路径，作为 src。最后清空 li 内容，把 img 塞进去：

var faceDir = "images/"; //配置表情目录
var iframeDocument = null;
var iframeWindow = null;
var isIe = false;
$.each($("#faceList>li"), function(){
    var node = document.createElement("img");
    node.className = $(this).attr("class");
    node.src = faceDir+$(this).html();
    this.innerHTML = "";
    this.appendChild(node);
});

然后放一个 iframe 作为编辑器主体：

拿到 iframe 的引用，并打开编辑模式：

iframeWindow = document.getElementById("Edit").contentWindow;
iframeDocument = document.getElementById("Edit").contentWindow.document;
iframeDocument.designMode="On"; //打开iframe 编辑模式

这里有个细节：designMode="On" 这个方法其实挺常见的，但要注意兼容性。另外，为了让 iframe 能自动换行，需要给它的 body 设置样式：

iframeDocument.write("");

核心环节来了——点击表情图片，把它插入到 iframe 编辑器里。这里需要处理浏览器兼容性，因为 IE 和标准浏览器获取选区的方式不一样。先让编辑器获得焦点，然后判断 document.selection 是否存在（IE 的做法），如果存在就用 pasteHTML 把表情的 HTML 插入；否则用 window.getSelection 拿到 range，再通过 surroundContents 把表情包裹进去。代码实现如下：

$("#faceList>li").click(function(){
    var $this = $(this);
    var $thisImg = $(this).find("img:eq(0)"); //当前点击的表情（IMG标记）
    document.getElementById("Edit").contentWindow.focus(); //使编辑区域得到焦点
    var r = null;
    if(document.selection) //处理兼容性问题
    {
        //把表情放入iframe
        r = iframeDocument.selection.createRange();
        iframeDocument.selection.empty();
        r.pasteHTML($thisImg[0].parentNode.innerHTML.toString());
    }
    else if(window.getSelection)
    {
        r = iframeWindow.getSelection().getRangeAt(0);
        iframeWindow.getSelection().removeAllRanges();
        var node = document.createElement("img");
        node.className = $thisImg.attr("class");
        node.src = $thisImg.attr("src");
        r.surroundContents(node);
    }
});

到这里，插入表情的功能基本完成了。但还有一个收尾工作：当用户提交或保存内容时，需要把编辑区里的 img 标签翻译成自定义的标记（比如 /:wx 这样的字符串），方便后端存储或解析。做法是获取 iframe body 的 innerHTML，然后复制一份到内存中的 div 里，遍历所有表情 img，找到对应的 class，再用 replaceWith 替换成标记文本：

function GeteEditData()
{
    var edit = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    //在内存中Copy一个该节点副本，以保全文档流格式
    var str = new String(edit);
    var $content = $("
"+str+"
");
    var imgNode = $("#faceList img");
    $.each(imgNode, function(){
        var mark= "/:"+$(this).attr("class").toString();
        var fs = $content.find("."+$(this).attr("class").toString());
        if(fs!=null&&fs[0]!=undefined)
        {
            fs.replaceWith(mark);
        }
    });
}

其实还有很多细节没处理，比如选区丢失、跨域问题、不同浏览器的 beha vior 差异……但也只能一步步来。上面这些代码足够让一个基本的表情编辑器跑起来，希望能给遇到同样需求的朋友提供一些参考。