跨多个编辑器共享 Quill 工具栏答案

【问题标题】：Share Quill toolbar across multiple editors跨多个编辑器共享 Quill 工具栏
【发布时间】：2015-10-30 17:06:49
【问题描述】：

借助出色的 Quill Javascript 富文本编辑器，我试图让两个或多个编辑器共享同一个工具栏。

我想（来自documentation）目前这是不可能的，所以我试图通过在被点击为后者的编辑器上通过 API 添加工具栏模块来“模拟”这一点：

// this uses jQuery
$editorTag.click(function(e){
    var tag = e.target;
    var editor = getEditorByTag(tag);
    if( editor )
        editor.addModule('toolbar',{container:'#toolbar'});
});

这似乎可行，但我怀疑 Quill 不喜欢在同一个对象上一遍又一遍地添加相同的模块，因为它最终会吐出：

(node) 警告：检测到可能的 EventEmitter 内存泄漏。 11 听众补充道。使用emitter.setMaxListeners() 增加限制。 quill.js（第 4727 行）

那么有没有办法删除之前添加的模块？比如：

// installs editor
var editor = new Quill('#editor');
// adds toolbar module
editor.addModule('toolbar',{container:'#toolbar'});
// removes just added toolbar module
editor.removeModule('toolbar');

【问题讨论】：

好的，在同一个工具栏上多次调用 addModule() 会完全搞乱事件：安装多个事件时，会多次应用它们，因此 Quill 开始循环应用工具栏格式命令在选择上。完全需要一种方法来随意解除工具栏的武装！
你找到解决方案了吗？
@Dan 仍然没有。我现在申请的是一种解决方法：我一次使用一个编辑器，在创建新的编辑器时，我使用 Quill 对象上未记录的“destroy”方法销毁旧的编辑器，以便分离所有内容。哦，我还使用 jQuery 重新创建了工具栏 HTML，但出于其他原因（关于样式和功能附件）。无论如何，仍然没有解除武装的方法。我只是希望 Quill 开发人员不要放弃，因为这个项目简直太棒了。

标签： javascript toolbar rich-text-editor quill

【解决方案1】：

前几天我遇到了同样的问题，并找到了适合我们用例的解决方案。这基本上就是我所做的：

我正在创建一个 Quill 实例，使用自定义工具栏定位在顶部。编辑器元素被放置在一个临时的、隐藏的、容器。当用户双击三个文本中的任何一个时容器（Editables），将编辑器元素移植到表单中临时容器到 Editable 内的新位置。如果一个用户按下退出键，Editable 将被停用，移动编辑器元素返回到临时容器。

你可以在这里测试它：https://codesandbox.io/s/hungry-pine-o8oh9?file=/src/App.js

GitHub 仓库：https://github.com/maxfahl/Quill-Edit-Multiple

随意使用代码。

【讨论】：

【解决方案2】：

保留 Quills 历史的解决方案是扩展 Toolbar 并注册它有一个模块

    class ToolbarAlt extends Toolbar {
      resetToolbar () {
        this.container.childNodes.forEach(el => {
          const clone = el.cloneNode(true);
          el.parentNode.replaceChild(clone, el);
        });
        this.container.childNodes.forEach((input) => {
          this.attach(input);
        }, this);
      }
   }
   Quill.register('modules/toolbar', ToolbarAlt, true);

然后当你在一个编辑器中聚焦时使用 quill.getModule('toolbar') 调用你的工具栏

【讨论】：