JS 自定义 Quill 富文本编辑器

官方文档示例

https://quilljs.com/guides/cloning-medium-with-parchment/

自己写一个

定制自己的组件，参考官方 demo 怎么写都写不出来，后来发现这样就可以了

let Parchment = Quill.import('parchment');
// ........

示例

var Embed = Quill.import('blots/embed');
class MyCustomTag extends Embed {
  static create(paramValue) {
    let node = super.create();
    node.innerHTML = paramValue;
    //node.setAttribute('contenteditable', 'false');
    //node.addEventListener('click', MyCustomTag.onClick);
    return node;
  }

  static value(node) {
    return node.innerHTML;
  }
}

MyCustomTag.blotName = 'my-custom-tag';
MyCustomTag.className = 'my-custom-tag';
MyCustomTag.tagName = 'my-custom-tag';
//in case you need to inject an event from outside
/* MyCustomTag.onClick = function(){
     //do something
 }*/

Quill.register(MyCustomTag);

其他

还有个监听删除的代码

quill.on("text-change", (delta, oldDelta, source) => {
  if (source === "user") {
    let currrentContents = quill.getContents();
    let diff = currrentContents.diff(oldDelta);
    try {
      console.log(diff.ops[0].insert.image);
    } catch (_error) {}
  }
});

参考文章

这个写的特别好

https://www.cnblogs.com/linxiyue/p/10305047.html

其他参考