CODEWITHSUNDEEP
javascripttoolbarrich-text-editorquill
Niki Romagnoli
Niki Romagnoli

Reputation: 1506

Share Quill toolbar across multiple editors

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

Upvotes: 10

Views: 4186

Answers (2)

Jean Grimbert
Jean Grimbert

Reputation: 51

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

Upvotes: 0

Max Fahl
Max Fahl

Reputation: 888

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.

Upvotes: 4

Related Questions