Quill.js：カスタムリンクフォーマットの作成 - または - 同じタグ名のカスタムフォーマット

Question

私はQuill 1.0.0-rc.1を使用しています。いくつかの異なるタイプのリンク形式を作成するにはどうすればよいですか？私はdata-link-type属性を追加する3種類のリンク形式を作っています。リンクを作成すると、それは問題ありません。しかし、pasteHTMLを使用してコンテンツをエディタにリロードすると、tagNameがすべて 'A'であるため、最後に登録されたフォーマットが勝ちます。したがって、はすべてresourceに設定されます。

ので、この：私はコードペン含めました

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

：

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

は、このになりクイルを使用することができます

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

をtagNameおよび/またはclassNameを使用して、DOMノードをドキュメントモデルにマップします。 createに属性を設定するだけでは不十分です。 targetまたはrelなどの無関係な属性を設定しないと、文書に意味のあるコンテンツが含まれないようにすることが意図的です（属性が意味を持つ場合は、Attributorを使用します）。

このフォークされたCodePenには、classNameで動作するサンプルがあります。 classnameが存在しない場合は、登録順に依存するtagNameが使用されます。