在评论输入框中插入表情

越陌度阡

发布于 2020-11-26 12:26:37

4K0

发布于 2020-11-26 12:26:37

最近在做一个后台管理系统，要求可以对前台用户的作品进行评论，而评论要可以输入表情，常规的文字输入框都是用的文本域textarea来做的，但这种输入框只能输入文字，没有办法输入表情图标，这个时候可编辑div就能起到作用了，那么如何在可编辑的div中插入表情呢？

要完成这个功能得用到 selection 以及 range，selection 对象由 window.getSelection() 方法获得，它代表页面中的文本选区，选区对应的区域，而range对象，可由selection对象的 getRangeAt() 方法获得，实现在光标处插入图片后将光标移到图片后边，就是使用这两个对象中的方法。

基本的实现步骤是这样的，首先获得 selection 选区对象，再获得范围对象 range，创建图片节点，将图片节点插入到范围中，接着将范围收缩为它末端的一个点，最后将选区清除，将收缩后的范围重新添加到选区中即可，以下是核心的代码实现。

function insertImg(src) {
    if ('getSelection' in window) {
        var sel = window.getSelection();
        // 有sel对象，并且用户已经点击过页面，且点击的选区起点和终点在同一位置
        if (sel && sel.rangeCount === 1 && sel.isCollapsed) {
            // 获取范围
            var range = sel.getRangeAt(0);
            var img = new Image();
            img.src = src;
            // 插入图片
            range.insertNode(img);
            // 将选区折叠为一个插入点，为了兼容IE添加一个参数
            range.collapse(false);
            // 移除选区
            sel.removeAllRanges();
            // 添加选区
            sel.addRange(range);
        }
    } else if ('selection' in document) {
        // content为可编辑div的ID
        var div = document.getElementById('content');
        // 获得焦点
        div.focus();
        // 创建范围对象
        var range = document.selection.createRange();
        // 插入图片
        range.pasteHTML('<img src="' + src + '">');
        // 如果要插入文本，请用range.text="XXXX"
        div.focus();
    }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/03/03 ，如有侵权请联系 cloudcommunity@tencent.com 删除

range