javascript - 在 QuillJS 中添加自定义类到 blockquote

Question

我试图弄清楚当用户单击 block 引用工具栏按钮时如何添加自定义类。目前，当单击 blockquote 时，将按如下方式创建元素:

<blockquote class="ql-align-justify">this is my quoted text</blockquote>

我想将 .blockquote 添加到类中，如下所示:

<blockquote class="ql-align-justify blockquote">this is my quoted text</blockquote>

我目前正在考虑添加一个处理程序，但似乎没有太多关于其工作原理的文档:

 this.editor = new Quill(this.$refs.editor, this.editorOptions)
 // Handlers can also be added post initialization
 var toolbar = this.editor.getModule('toolbar');
 toolbar.addHandler('blockquote', function(value) {
    //todo: working on adding the blockquote class to blockquotes.
    console.log('blockquote called');
    console.log('value:');
    console.log(value);

    if (value) {
       this.quill.format('blockquote');
    }

 });

Answer 1

我认为处理程序无法做到这一点(据我所知)

但是您可以扩展BlockQuote格式，通过这样做，您将完全控制节点，您可以添加类，甚至单击处理程序。

负责 block 引用的格式是:

const BlockQuote = Quill.import('formats/blockquote');

所以你可以简单地做:

  const BlockQuote = Quill.import('formats/blockquote');

  class CustomBlockQuote extends BlockQuote {
    static create(value) {
      const node = super.create(value);
      node.classList.add('test');
      return node;
    }
  }

您可以更新标签名称和印迹名称，例如:

  CustomBlockQuote.blotName = 'custom-blockquote';
  CustomBlockQuote.tagName = 'blockquote';

或者甚至更简单，仅更改类:

  class CustomBlockQuote extends BlockQuote {}
  CustomBlockQuote.blotName = 'custom-blockquote';
  CustomBlockQuote.tagName = 'blockquote';
  CustomBlockQuote.className = 'custom-class-name';
  Quill.register(CustomBlockQuote, true);

我刚刚创建了一个 jsfiddle 作为示例，希望它对您有用: https://jsfiddle.net/hassansalem/095mh3fn/4/