在多个编辑器之间共享 Quill 工具栏 [英] Share Quill toolbar across multiple editors

问题描述

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

With the great Quill rich text editor for Javascript I'm trying to make two or more editors share the same toolbar.

我想(来自 documentation)目前这不可能，所以我我试图通过在已被点击的编辑器上通过 API 添加工具栏模块来模拟"这一点:

I suppose (from documentation) that this is not possible right away at the moment, so I'm trying to "simulate" this by adding the toolbar module through API on the editor that has been clicked as the latter:

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

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

It seems to work, but I suspect that Quill doesn't like adding many times the same module over and over on the same object since eventually it spits:

(节点)警告:检测到可能的 EventEmitter 内存泄漏.11听众补充.使用emitter.setMaxListeners() 增加限制.quill.js(第 4727 行)

(node) warning: possible EventEmitter memory leak detected. 11 listeners added. Use emitter.setMaxListeners() to increase limit. quill.js (row 4727)

那么有没有办法删除以前添加的模块?类似的东西:

So is there a way to remove a previously added module? Something like:

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

推荐答案

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

I encountered the same problem the other day, and have found a solution that works for our usecase. This is basically what I've done:

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

I'm creating one instance of Quill, using a custom toolbar positioned at the top. The editor element is placed in a temporary, hidden, container. When the user double clicks any of the three text containers (Editables), the editor element will be transplanted form the temporary container to a new location inside the Editable. If a user hits the escape key, the Editable will be deactivated, moving the editor element back to the temporary container.

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

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

GitHub repo: https://github.com/maxfahl/Quill-Edit-Multiple

随意使用代码.

这篇关于在多个编辑器之间共享 Quill 工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！