js：富文本编辑器实现@某人-CFANZ编程社区

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

需求分析

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

解决

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

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

发现以下几个问题：

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

最终实现的效果
js：富文本编辑器实现@某人_rich-text

核心代码

/**
 * 在光标处插入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();
}