为 Quill 印迹实现自定义编辑器 [英] Implement custom editor for Quill blot

问题描述

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

I'm trying to customize the Quill editor for my needs. I managed to implement and insert custom blots, as described in https://quilljs.com/guides/cloning-medium-with-parchment/ But I need to edit data, which is attached to my blots, like the URL of a link for example. The default implementation of Quill displays a small "inline" edit box for links. I want to implement something like that myself, but just don't get it. I did not find any hints in the docs and guides. Reading the source code of Quill, I was not able to figure out where the editing dialog for links is implemented. Any starting point would be very appreciated.

推荐答案

我尝试过类似的方法.正确的做法应该是创建一个模块.不幸的是，正如您所知，这并不像看起来那么容易.

I've tried something similar. Proper way of doing it should be creating a module. Unfortunately as you already know it is not as easy as it seems.

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

Let me point you to some useful resources that helped me a lot with understanding how to create extensions for quill. Quills maintainer is curating Awesome quill list.

我建议特别关注

• quill-emoji 它包含在书写时显示工具提示表情符号的代码
• quill-form 也许某些表单扩展有一些代码可以为您指明正确的方向

• quill-emoji it contains code to display tooltip emoji while writing
• quill-form maybe some form extension has some code that will point you in the right direction

这是我使用自定义 quill 模块的尝试.

Here is my try on to it using custom quill module.

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 演示

查看工具提示:

1. 选择任意单词
2. 点击链接按钮右侧的隐形按钮，您的光标会变成手形.

需要解决的主要问题:

• 为了自定义工具提示，您需要从 SnowTooltip 主要痛点是您无法轻松扩展该工具提示.
• 您还需要调整事件侦听器的代码，但应该很简单

• in order to customize the tooltip you will need to copy majority of the code from SnowTooltip Main pain point is that you cannot easily extend That tooltip.
• you need to also adapt the code of event listeners but it should be straightforward

这篇关于为 Quill 印迹实现自定义编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！