Can Quill BlockEmbeds可以使用任意標籤嗎？

我有一堆組件（html和邏輯片斷），我希望能夠嵌入到Quill文檔中，並且我不完全確定如何開始。每個組件都有一個根元素，但tagName是任意的（有aside,div，section等標籤）。每個組件有一個完全不奎爾編輯體驗（這是其他地方處理），因此，最好的增量只是看起來像這樣：Can Quill BlockEmbeds可以使用任意標籤嗎？

{ 
    ops: [ 
    { insert: 'Hello', attributes: { bold: true } }, 
    { insert: { component: 'domain.com/components/image/instances/foo' } }, 
    { insert: 'World!\n' } 
    ] 
}

我相信我的文檔中讀的地方，塊級別的印跡必須指定a tagName或 a className，但我無法找到相應的參考。 All examples我可以使用BlockEmbed指定一個tagName，而Parchment docs沒有真正解釋它。是否有正確的這種方式應該完成，是否有我應該知道的邊緣情況？所有這些組件都是塊級的，所以（從我讀的this issue）我不認爲選擇應該是一個問題，對不對？

來源

2017-07-31 Yoshokatana

我相信https://github.com/quilljs/parchment#blots是參考你正在找。我正在計劃爲Parchment寫更多/更好的文檔，但聽起來你想繼承BlockEmbed（blots/block.js），因爲編輯經驗在其他地方。 – jhchen

啊，這就是我的想法。具體來說，「至少一個Blot必須用一個靜態的blotName命名並且與tagName或者className相關聯」如果我定義了一個className而不是一個tagName，會發生什麼？我在實踐中找不到任何這樣的例子（從StackOverflow，github問題等） – Yoshokatana

有一個看起來here和here

如果你的目的是創建一個標籤，它不存在於鵝毛筆你必須做的事情是這樣的： 配置您的自定義標籤

var Embed = Quill.import('blots/embed'); 
class MyCustomTag extends Embed { 
    static create(paramValue) { 
     let node = super.create(); 
     node.innerHTML = paramValue; 
     //node.setAttribute('contenteditable', 'false'); 
     //node.addEventListener('click', MyCustomTag.onClick); 
     return node; 
    } 

    static value(node) { 
     return node.innerHTML; 
    } 
} 

MyCustomTag.blotName = 'my-custom-tag'; 
MyCustomTag.className = 'my-custom-tag'; 
MyCustomTag.tagName = 'my-custom-tag'; 
//in case you need to inject an event from outside 
/* MyCustomTag.onClick = function(){ 
    //do something 
}*/ 

Quill.register(MathQuillFormula);

使用您的自定義標籤

this.editor.insertEmbed(
0, //INDEX_WHERE_YOU_TO_INSERT_THE_CONTENT, 
'my-custom-tag',//THE NAME OF YOUR CUSTOM TAG 
'<span>MY CONTENT</SPAN>'// THE CONTENT YOUR TO INSERT 
);

注意的是，默認這一習俗將獲得屬性display: block 您可以通過CSS規則爲例瞄準它

my-custom-tag { 
    display : inline; 
}

來源

2017-09-05 22:51:40

Can Quill BlockEmbeds可以使用任意標籤嗎？

回答

相關問題