Emulate document pages in Quill js editor

Question

I would like to achieve the effect of the multipage document in Quill editor. What I mean by that is, after text will reach the certain amount of max pixels height (some equivalent of 300dpi)it will create page break/or jump to next page (container editor instance). Something like in Google Docs.

I wanted to just create another instance of quill and focus into it but that would create another toolbar (single toolbar for multiple editors is not supported yet, but there is pr for that)

For now, I am just creating a divider which is a div element with the same color as the background behind the white page.

Does anyone know some nice and clean solution for that or have any ideas how I could solve it?

Answer 1

With regards to listening on the editor's height to trigger adding another, There are many approach within Quill's API or outside with your own vanilla. Not a problem.

To the multiple Editors sharing a single Toolbar,

Here is a thread from, still an Open, issue on QuillJS:

Consider allowing multiple editors on the same page & to use the same toolbar. #633

One neat solution is from this comment by Pawel Glowacki

3. Initialize a Quill editor inside the active box only and destroy the previous editor + one toolbar This is the solution I am using today and it results in the best performance and a some what clean solution. When the active box changes, I get the Quill instance content, remove the previous Quill events + instance, and I update the DOM as the HTML created by the editor is not removed automatically.

I am using this quill delta to html addon

if (window.editor) {
    //Get the content
    var content = '';
    if (window.editor.getLength() > 1) {
        var delta = window.editor.getContents(); //store globally
        var converter = new QuillDeltaToHtmlConverter(delta.ops, {});
        var html = converter.convert();
        if (typeof html !== "undefined" && html !== null) {
            content = html;
        }
    }

    //remove any [on events](https://quilljs.com/docs/api/#events) you attached to the Quill instance 

    //remove Quill instance
    window.editor = undefined;

    // clean DOM and set content
    document.getElementById('previousBoxId').classList.remove('ql-container');
    document.getElementById('previousBoxId').innerHTML = content;
}

//create new quill instance
window.editor = new Quill(...)

//set the editor contents ("//store globally" comment above)
if (editorContent) {
    window.editor.setContents(editorContent)
}

window.editor.focus(); //initialize any on events if you want The downside of Quill not managing multiple instances of the editor with a single toolbar is not a big problem, but it does require you to do the research/testing + add the logic yourself, which can be a hassle.

I hope someone finds this useful.

If you need to keep track of multiple Quill instances at once, create a JavaScript object and store them under some key.

window.editors = {
   editor1: Quill_instance,
   editor2: Quill_instance,
   ...
}

I was also not able to find a better solution in the Quill docs but I have a very large app which handles 50+ toolbars and destroying the toolbar then creating a new one each time I create a new Quill instance has not caused any issues.