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

Share Quill toolbar across multiple editors

本文关键字：共享 Quill 工具栏 编辑器      更新时间：2023-09-26

使用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听众补充道。使用发射器.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');

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

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

您可以在此处进行测试：https://codesandbox.io/s/hungry-pine-o8oh9?file=/src/App.js

GitHub回购：https://github.com/maxfahl/Quill-Edit-Multiple

您可以随心所欲地使用代码。

保存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（"工具栏"）调用工具栏

相关文章：