CODEWITHSUNDEEP
javascriptjqueryhtmlquill
Jam3sn
Jam3sn

Reputation: 1087

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. 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. 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. 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!

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

Upvotes: 1

Views: 3853

Answers (1)

Jam3sn
Jam3sn

Reputation: 1087

To answer my own question, I should have been extending Inline for it to obviously be 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);

Upvotes: 4

Related Questions