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

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

• javascript
• toolbar
• rich-text-editor
• quill

• Ok, calling addModule() multiple times on the same toolbar pletely messes up the events: as multiple events are installed, multiple times they are applied, so Quill starts to loop applying alternatively the toolbar format mand forever on the selection. Completely need a way to un-arm the toolbar at willing! – Niki Romagnoli Commented Nov 3, 2015 at 17:46
• Did you ever find a solution to this? – Dan Commented Nov 28, 2015 at 17:11
• 1 @Dan Still not. What I'm applying for now is a workaround: I use the editors one at a time and when creating the new one I destroy the old one with the undocumented "destroy" method on Quill object, in order to detach everything. Oh I also recreate the toolbar HTML with jQuery, but for other reasons (something about styling and function attachment). Anyway, still no un-arming method. I just hope that Quill developers won't give up, since this project is simply amazing. – Niki Romagnoli Commented Dec 1, 2015 at 19:35

2 Answers 2

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./maxfahl/Quill-Edit-Multiple

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

A solution that keeps the history of your Quills is to extends Toolbar and register it has a module

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

Then call your Toolbar with the quill.getModule('toolbar') when you go focusin one editor