Question

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

Answer 1

这是部分答案。请参见文件“ https://github.com/quilljs/quill/blob/develop/themes/snow.js”中的第41-64行

我还没有尝试实现类似的方法，但是Quill似乎正在监视“选择更改”事件，并检查选择是否在具有已定义链接的LinkBlot上。

SnowTooltip类包含对选择器的引用，即“ a.ql-preview”，“ ql-editing”，“ a.ql-action”和“ a.ql-remove”，我们在链接中找到-编辑工具提示。

this.quill.on(
  Emitter.events.SELECTION_CHANGE,
  (range, oldRange, source) => {
    if (range == null) return;
    if (range.length === 0 && source === Emitter.sources.USER) {
      const [link, offset] = this.quill.scroll.descendant(
        LinkBlot,
        range.index,
      );
      if (link != null) {
        this.linkRange = new Range(range.index - offset, link.length());
        const preview = LinkBlot.formats(link.domNode);
        this.preview.textContent = preview;
        this.preview.setAttribute('href', preview);
        this.show();
        this.position(this.quill.getBounds(this.linkRange));
        return;
      }
    } else {
      delete this.linkRange;
    }
    this.hide();
  },
);

Answer 2

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

让我为您指出一些有用的资源，这些资源对我了解如何创建羽毛笔扩展名有很大帮助。羽毛笔维护者正在整理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复制大部分代码。主要的痛点是您无法轻松扩展该工具提示。
您还需要调整事件侦听器的代码，但这应该很简单

实施自定义编辑器以进行笔芯印迹

2 个答案: