Add more buttons after editor is loaded?

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/48665916/add-more-buttons-after-editor-is-loaded

标签

quill