简体   繁体   English

羽毛笔JS添加内联或'formatBlock'样式

[英]Quill JS adding inline or 'formatBlock' styles

I'm using QuillJS for an editor, and in this editor I'd like to create some custom text styles. 我正在使用QuillJS作为编辑器,并希望在此编辑器中创建一些自定义文本样式。 You have the default, bold etc. which already exist, however i'd like to extend upon these. 您有已经存在的默认,粗体等,但是我想在此基础上进行扩展。 For example, there's blockquote which'll create a block quote, however I want an inline quote. 例如,有一个blockquote会创建一个块引用,但是我想要一个内联引用。 For this i'd ideally wrap it with say a span and class to apply the desired style, however I can't figure out how this is to be achieved with Quills API. 为此,我最好用一个span和class对其进行包装以应用所需的样式,但是我无法弄清楚如何使用Quills API来实现。 Sure I can create a custom block, but that applies to the whole section of text rather then just the selected text. 当然,我可以创建一个自定义块,但这适用于整个文本部分,而不只是所选文本。 So i've tried using .formatText with my custom block, but not had any luck although if I change 'quote' to 'bold' it does... Any help / suggestions would be greatly appreciated! 因此,我尝试将.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,
            }
        }
    }
});

To answer my own question, I should have been extending Inline for it to obviously be inline. 要回答我自己的问题,我应该一直将Inline扩展为显然是inline。 No need for a handler function. 不需要处理程序功能。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM