羽毛筆JS添加內聯或'formatBlock'樣式

Question

我正在使用QuillJS作為編輯器，並希望在此編輯器中創建一些自定義文本樣式。 您有已經存在的默認，粗體等，但是我想在此基礎上進行擴展。 例如，有一個blockquote會創建一個塊引用，但是我想要一個內聯引用。 為此，我最好用一個span和class對其進行包裝以應用所需的樣式，但是我無法弄清楚如何使用Quills API來實現。 當然，我可以創建一個自定義塊，但這適用於整個文本部分，而不只是所選文本。 因此，我嘗試將.formatText與自定義塊一起使用，但沒有任何運氣，盡管如果我將'quote'更改為'bold'，它確實...任何幫助/建議將不勝感激！

let Block = Quill.import('blots/block');

class quote extends Block { }
quote.blotName = 'quote';
quote.className = 'quote';
quote.tagName = 'span';
Quill.register({ 'formats/quote': quote });

//Handler to change inline
var quoteHandler = function(){
    var range = quill.getSelection();
    console.log(range);
    quill.formatText(range.index, range.length, 'quote', true);
}



/* Quill */
var quill = new Quill('.editor_space', {
    theme: 'snow',
    placeholder: 'Compose an epic...',
    modules: {
        toolbar:{
            container: '.main_toolbar',
            handlers: {
                'linebreak': linebreakHandler,
                'inlineQuote': quoteHandler,
            }
        }
    }
});

Answer 1

要回答我自己的問題，我應該一直將Inline擴展為顯然是inline。 不需要處理程序功能。

let Inline = Quill.import('blots/inline');
class quote extends Inline {
    static create(value) {
        let node = super.create(value);
        return node;
    }
}
quote.blotName = 'quote';
quote.className = 'quote';
quote.tagName = 'div';
Quill.register(quote);