左小白的技术日常
Github
2018/10/02
Author: guoqzuo

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

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

思路

image


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属性如何定位光标和设置光标