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'样式

1 个答案: