quill富文本，插入不可编辑片段（行内）

• 需求描述： quill富文本，插入@人，插入的内容不可编辑，必要属性（id，class）不能丢失用来判断回显。

• 扩展代码

// @人 自定义标签扩展
const Embed = Quill.import("blots/embed");
console.log(Quill.imports)
class DividerBlot extends Embed  {
    static create(value) {
      console.log('value', value)
      let node = super.create();
      node.innerHTML = value.text
      node.setAttribute('id', value.id);
      node.setAttribute('contenteditable', false);
      node.setAttribute('class', 'at-some-one');
      // @人样式不受影响
      node.setAttribute('style', 'color:#4498F0;text-decoration: none;display: inline-block;font-style: normal;background-color: #fff;margin: 0 2px;');
      return node;
    }
    static value(node) {
      return {
        id: node.getAttribute('id'),
        text: node.innerHTML.trim()
      };
    }
 }
DividerBlot.blotName = 'atusertag';
DividerBlot.tagName = 'span';
DividerBlot.className = 'user-at-span';
Quill.register(DividerBlot);

• 使用方法：

      // 插入@人自定义标签
      let range = quill.getSelection(true);
      quill.insertEmbed(range.index, 'atusertag', {text:`@${itemVal.userName}`,id:itemVal.userId||'0'}, Quill.sources.USER);
      let contentVal = itemVal.userName.length + 1; //加一个空格
      quill.setSelection(range.index + contentVal, Quill.sources.SILENT);
      quill.focus()
      quill.update()

• 效果

相关参考链接：

1. quill-editor扩展的正确姿势
2. Cloning Medium with Parchment