Quill.js：制作自定义 link 格式 - 或 - 具有相同标签名称的自定义格式

Question

我正在使用 Quill 1.0.0-rc.1。如何制作几种不同类型的 link 格式？我制作了三种不同类型的 link 格式，它们添加了 data-link-type 属性。当我创建 links 时，没问题。但是，当我使用 pasteHTML 将内容重新加载到编辑器时，最后注册的格式获胜，因为 tagName 都是 'A'，所以所有 data-link-type 都设置好了至 resource.

所以这个：

<p>These are the links: 
  <a href="http://www.google.com" data-link-type="external">External</a> 
  <a href="/resources/3" data-link-type="resource">Resource</a>
  <a href="/pages/12" data-link-type="internal">Internal</a>
</p>

变成这样：

<p>These are the links: 
  <a href="http://www.google.com" data-link-type="resource">External</a> 
  <a href="/resources/3" data-link-type="resource">Resource</a>
  <a href="/pages/12" data-link-type="resource">Internal</a>
</p>

我附赠了一支代码笔：

http://codepen.io/anon/pen/akxNNK

var Inline = Quill.import('blots/inline');

class ExternalLink extends Inline {
  static create(value) {
    let node = super.create(value);
    value = value.trim();
    if (!value.match(/^http|mailto/)) {
      value = 'http://' + value
    }
    node.setAttribute('href', value);
    node.setAttribute('data-link-type', 'external');
    return node;
  }

  static formats(domNode) {
    return domNode.getAttribute('href');
  }
}

ExternalLink.blotName = 'external_link';
ExternalLink.tagName = 'A';


class InternalLink extends Inline {
  static create(value) {
    let node = super.create(value);
    if (!value.match(/^\/pages\//)) {
      value = '/pages/' + value
    }
    node.setAttribute('href', value);
    node.setAttribute('data-link-type', 'internal');
    return node;
  }

  static formats(domNode) {
    return domNode.getAttribute('href');
  }
}

InternalLink.blotName = 'internal_link';
InternalLink.tagName = 'A';


class ResourceLink extends Inline {
  static create(value) {
    let node = super.create(value);
    if (!value.match(/^\/resources\//)) {
      value = '/resources/' + value
    }
    node.setAttribute('href', value);
    node.setAttribute('data-link-type', 'resource');
    return node;
  }

  static formats(domNode) {
    return domNode.getAttribute('href');
  }
}

ResourceLink.blotName = 'resource_link';
ResourceLink.tagName = 'A';


Quill.register({
  'formats/internal_link': InternalLink,
  'formats/external_link': ExternalLink,
  'formats/resource_link': ResourceLink
});


var quill = new Quill(
  '#editor-container',
  { theme: 'snow' }
);

quill.pasteHTML('<p>These are the links: <a href="http://www.google.com" data-link-type="external">External</a> <a href="/resources/3" data-link-type="resource">Resource</a> <a href="/pages/12" data-link-type="internal">Internal</a></p>');

Answer 1

Quill 可以使用 tagName and/or className 将 DOM 节点映射到其文档模型。仅在 create 中设置属性是不够的。这是有意允许设置无关属性，如 target 或 rel，而不会为文档提供有意义的内容（如果属性有意义，那么您将使用 Attributor） .

这个分叉 CodePen 有你的例子与 className 一起工作。请注意，当没有类名时，它将使用标签名，这取决于注册顺序。

Quill.js：制作自定义 link 格式 - 或 - 具有相同标签名称的自定义格式

Quill.js: Making custom link formats -or- Custom formats with the same tag name

quill