加载编辑器后添加更多按钮? [英] 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);

推荐答案

您的问题已作为问题发布在 quill 的官方 github 存储库中.见这里.显然，动态修改工具栏不受官方支持.那里也提到了一种解决方法，但我不明白它是如何工作的.
我能够创建另一种解决方法，尽管不是一个好方法.基本上我只是修改选项并重新初始化编辑器.当编辑器重新初始化时，它似乎工作并且输入的文本被保留.
这是代码:https://codepen.io/nik648/pen/VQMxQj.注意:要测试它，请在输入字段中输入 my-thing-2 并单击添加.希望这会有所帮助.

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.

这篇关于加载编辑器后添加更多按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！