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

我正在使用Quill 1.0.0-rc.1。我怎样才能制作几种不同类型的链接格式？我制作了三种不同类型的链接格式，添加了data-link-type属性。当我创建链接时，没关系。但是，当我使用pasteHTML将内容重新加载到编辑器中时，由于tagName都为'A'，所以最后一次注册格式获胜，因此所有data-link-type都设置为resource。Quill.js：制作自定义链接格式 - 或 - 具有相同标记名称的自定义格式

所以这个：

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

来源

2016-08-18 Lee

奎尔可以使用tagName和/或className将DOM节点映射到其文档模型。仅仅在create中设置属性是不够的。这是为了允许设置诸如target或rel之类的无关属性，而不会为文档贡献有意义的内容（如果属性有意义，那么您将使用Attributor）。

这个分叉CodePen有你的例子使用className。注意，当没有类名时，它将使用tagName，这取决于注册顺序。

来源

2016-08-18 21:30:51 jhchen

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

回答

相关问题