quill - 为 Quill 印迹实现自定义编辑器

Question

我正在尝试自定义 Quill editor满足我的需要。我设法实现并插入自定义印迹，如 https://quilljs.com/guides/cloning-medium-with-parchment/ 中所述。但是我需要编辑附加到我的印迹上的数据，例如链接的 URL。 Quill 的默认实现为链接显示一个小的“内联”编辑框。我想自己实现类似的东西，但就是不明白。我在文档和指南中没有找到任何提示。阅读 Quill 的源代码，我无法弄清楚链接的编辑对话框是在哪里实现的。任何起点将不胜感激。

Answer 1

我试过类似的东西。正确的做法应该是创建一个模块。不幸的是，正如您已经知道的那样，这并不像看起来那么容易。

让我指出一些有用的资源，这些资源对我理解如何为 quill 创建扩展有很大帮助。
Quills 维护者正在策划 Awesome quill列表。

我建议特别关注

quill-emoji它包含在编写

时显示工具提示表情符号的代码

quill-form也许某些表单扩展有一些代码可以为您指明正确的方向

这是我使用自定义羽毛笔模块进行的尝试。

const InlineBlot = Quill.import('blots/inline');

class NamedLinkBlot extends InlineBlot {
  static create(value) {
    const node = super.create(value);

    node.setAttribute('href', value);
    node.setAttribute('target', '_blank');
    return node;
  }
}
NamedLinkBlot.blotName = 'namedlink';
NamedLinkBlot.tagName = 'A';

Quill.register('formats/namedlink', NamedLinkBlot);

const Tooltip = Quill.import('ui/tooltip');


class NamedLinkTooltip extends Tooltip {
  show() {
    super.show();
    this.root.classList.add('ql-editing');
  }


}

NamedLinkTooltip.TEMPLATE = [
  '<a class="ql-preview" target="_blank" href="about:blank"></a>',
  '<input type="text" data-link="https://quilljs.com">',
  'Url displayed',
  '<input type="text" data-name="Link name">',
  '<a class="ql-action"></a>',
  '<a class="ql-remove"></a>',
].join('');


const QuillModule = Quill.import('core/module');

class NamedLinkModule extends QuillModule {
  constructor(quill, options) {
    super(quill, options);
    this.tooltip = new NamedLinkTooltip(this.quill, options.bounds);
    this.quill.getModule('toolbar').addHandler('namedlink', this.namedLinkHandler.bind(this));
  }

  namedLinkHandler(value) {
    if (value) {
      var range = this.quill.getSelection();
      if (range == null || range.length === 0) return;
      var preview = this.quill.getText(range);
      this.tooltip.show();
    }
  }
}

Quill.register('modules/namedlink', NamedLinkModule);

const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      namedlink: {},
      toolbar: {
        container: [
          'bold',
          'link',
          'namedlink'
        ]
      }
    }
  });

CodePen Demo

要查看工具提示:

选择任何单词

单击链接按钮右侧的隐形按钮，您的光标将变为手形。

需要解决的主要问题:

为了自定义工具提示，您需要从 SnowTooltip 复制大部分代码主要的痛点是你不能轻易地扩展那个工具提示。

您还需要调整事件监听器的代码，但它应该是直截了当的