Quill.js: Создание пользовательских форматов ссылок -или- Пользовательские форматы с тем же именем тега

Question

Я использую Quill 1.0.0-rc.1. Как я могу создать несколько разных типов форматов ссылок? Я создал три разных типа форматов ссылок, которые добавляют атрибут data-link-type. Когда я создаю ссылки, все в порядке. Однако, когда я перезагружаю контент в редакторе, используя pasteHTML, последний зарегистрированный формат выигрывает, так как tagName s - все 'A', и поэтому все data-link-type s устанавливаются в 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 и/или className для сопоставления узлов DOM с его моделью документа. Просто установка атрибута в create недостаточна. Это преднамеренно позволяет указать посторонние атрибуты, такие как target или rel, которые не будут содержать значимый контент для документа (если атрибут был значимым, то вы использовали бы Attributor).

Этот разветвленный CodePen имеет ваш пример, работающий с именем класса. Обратите внимание, что если имя класса отсутствует, оно будет использовать имя tagName, которое зависит от порядка регистрации.