Building a bit on the answer of this question, I would like to know if it's possible to add more buttons to the editor after it is loaded/constructed. I have one custom button like this:
var Block = Quill.import('blots/block');
class MyThing extends Block {}
MyThing.blotName = 'my-thing';
MyThing.className = 'my-thing';
MyThing.tagName = 'div';
Quill.register(MyThing);
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: [
['my-thing']
]
}
});
The user should be able to add their own buttons into this editor. There's a separate textfield somewhere, where they can write down the name of the button and then have it added as a new button to the editor after submitting it.
Is that possible? I want to be able to do something similair to this (doesn't work, obviously):
var newButton = $('#newButtonName').val();
var Block = Quill.import('blots/block');
class NewButton extends Block {}
NewButton.blotName = newButton;
NewButton.className = newButton;
NewButton.tagName = 'div';
Quill.register(NewButton);
quill.modules.toolbar.push(newButton);
Your problem is posted as an issue in the official github repo of quill. See here. Apparently, modifying the toolbar dynamically is not officially supported. A workaround for this is also mentioned there but i couldn't understand how it worked.
I was able to create another workaround though not a good one. Basically i just modify the options and reinitialize the editor. It seems to work and entered text is preserved when the editor is reinitialized.
Here is the code: https://codepen.io/nik648/pen/VQMxQj. Note: To test it, enter
my-thing-2
into the input field and click add. Hope this helps.