dev-zuo 技术日常
Github

富文本编辑器使用execCommand插入图片不生效的问题

这篇文章发布于 2018/10/02,归类于
标签:
execcommand插入图片光标消失富文本编辑器使用execCommand插入图片不生效的问题execCommand插入图片不生效

最近打算实现一个评论系统,评论如果只能回复文字就太low了,于是就打算自己做一个简单的富文本编辑器。

思路

image

// 在可编辑的富文本里插入图片
var img = `<img src='http://img.baidu.com/hi/tsj/t_0002.gif'>`;
document.getElementsByClassName("editor")[0].insertAdjacentHTML("beforeend", img)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #editor {
            width:300px;
            height:300px;
            border:1px solid #ccc;
        }
        img {
            width:35px;
            height:35px;
        }
    </style>
</head>
<body>
    <div id="editor" contenteditable="true"></div>
    <img id="img" src="http://img.baidu.com/hi/tsj/t_0002.gif">
    <script>
        var img = document.getElementById("img");
        // 点击img图片在div里插入一张图片
        img.onclick = function (e) {
            var value1 = document.execCommand('insertImage', false, 'http://img.baidu.com/hi/tsj/t_0002.gif');
            console.log(value1)
        }
    </script>
</body>
</html>
/* display:inline-block 父元素加上如下样式,可去掉系统自带的间隙 */
#face {
    font-size: 0;
    letter-spacing: -3px;
}

2018/10/03 更新

今天把插入表情的逻辑完善了下,发现当第一次进入,评论框还没聚焦,如果用户直接点标签按钮,发送表情,结果肯定是不成功的,于是觉得还是有必要在执行execCommand时如果没有聚焦就来个focus

var result = document.execCommand('insertImage', false, res.filePath);
// 如果执行失败,手动focus
if (!result) {
    // 获得焦点,防止可编辑div无焦点时,无效的问题,这种情况,光标位置不准确,每次都是开头位置
   document.getElementsByClassName("editor")[0].focus();
   document.execCommand('insertImage', false, res.filePath);
}

网上找了篇可以获取光标位置的函数,但发现兼容性貌似不怎么好,暂时保持这样。 有一遍文章还不错,收藏了以后研究 html元素contenteditable属性如何定位光标和设置光标