Quill.js:制作自定义链接格式 - 或 - 具有相同标签名称的自定义格式 [英] Quill.js: Making custom link formats -or- Custom formats with the same tag name

问题描述

我正在使用 Quill 1.0.0-rc.1.如何制作几种不同类型的链接格式?我制作了三种不同类型的链接格式，添加了 data-link-type 属性.当我创建链接时，它很好.但是，当我使用 pasteHTML 将内容重新加载到编辑器中时，最后注册的格式将获胜，因为 tagName 都是A"，因此所有 data-link-types 设置为 resource.

I'm using Quill 1.0.0-rc.1. How can I make several different types of link formats? I've made three different types of link formats that add a data-link-type attribute. When I create the links, it's fine. However, when I reload the content into the editor using pasteHTML, the last registered format wins since the tagNames are all 'A', and so all the data-link-types get set to 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>

我已经包含了一个代码笔:

I've included a code pen:

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>');

推荐答案

Quill 可以使用 tagName 和/或 className 将 DOM 节点映射到其文档模型.仅仅在 create 中设置一个属性是不够的.这是有意允许设置诸如 target 或 rel 之类的无关属性，而这些属性不会为文档提供有意义的内容(如果属性有意义，那么您将使用归因者).

Quill can use tagName and/or className to map DOM nodes to its document model. Simply setting an attribute in create is not sufficient. This is intentional to allow extraneous attributes like target or rel to be set without that do not contribute meaningful content to the document (if an attribute was meaningful, then you would use an Attributor).

这个分叉的 CodePen 让您的示例使用 className.请注意，当没有 classname 时，它​​将使用 tagName，这取决于注册顺序.

This forked CodePen has your example working with className. Note when no classname is present, it will use the tagName, which depends on registration order.

这篇关于Quill.js:制作自定义链接格式 - 或 - 具有相同标签名称的自定义格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！