js：富文本编辑器实现@某人

需求分析

• 需要显示@某人。采用css伪类显示@符号
• 控制样式。插入一段约定好格式的html代码，提前设置好样式类
• 点击时需要整体选中，删除时需要整体删除。可添加属性contenteditable=false

解决

刚开始使用的是，插入html方法

document.execCommand("insertHTML", true, html);

发现以下几个问题：

• 无法插入span标签
• 无法插入空标签
• 会将用户插入的html片段优化处理

最终实现的效果

核心代码

/**
 * 在光标处插入html节点
 * @param {*} node 
 */
function insertHTMLNode(node) {
  // 如果有选中的内容，就替换掉
  var selection = window.getSelection();
  var range = selection.getRangeAt(0);
  //   console.log(range);

  // 删除原有内容
  range.deleteContents();

  range.insertNode(node);

  //  移动光标到下一个输入点
  selection.collapseToEnd();
}

完整代码 : https://github.com/mouday/more-editor 在线Demo: https://mouday.github.io/more-editor/

参考

• 另一种场景下的js @提到好友
• web 前端 @ 功能 JS 实现分析及其原理
• 富文本实现@选择人
• 使用wangEditor富文本编辑器时，可以@具体的人
• 视频：【代码】Javascript小项目 | 富文本编辑器