Share Quill toolbar across multiple editors

Question

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

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'});
});

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:

(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');

Answer 1

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:

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.

You can test it here: https://codesandbox.io/s/hungry-pine-o8oh9?file=/src/App.js

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

Feel free to use the code however you'd like.