Quill 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 以使其显然是内联的。不需要处理函数。

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

Quill JS 添加内联或 'formatBlock' 样式

Quill JS adding inline or 'formatBlock' styles

html

javascript

jquery

quill