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：製作自定義鏈接格式 - 或 - 具有相同標記名稱的自定義格式

回答

相關問題