在多个编辑器之间共享Quill工具栏

Question

使用Javascript的Quill富文本编辑器,我试图让两个或更多编辑器共享同一个工具栏.

我想(从文档中)目前不可能立即实现这一点,所以我试图通过在编辑器上通过API添加工具栏模块来"模拟"这一点,该编辑器已被点击为后者:

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

它似乎工作,但我怀疑Quill不喜欢在同一个对象上反复添加多次相同的模块,因为它最终会吐出:

(节点)警告:检测到可能的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');

Answer 1

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

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

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

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

您可以随意使用该代码。