javascript - 在 Quill js 编辑器中模拟文档页面

Question

我想在Quill编辑器中实现多页文档的效果。我的意思是，在文本达到一定数量的最大像素高度(相当于 300dpi)后，它将创建分页符/或跳转到下一页(容器编辑器实例)。类似于 Google Docs 中的内容。



我只想创建另一个 quill 实例并专注于它，但这会创建另一个工具栏(尚不支持多个编辑器的单个工具栏，但有 pr )

现在，我只是创建一个分隔线，它是 div与白页后面的背景颜色相同的元素。

有没有人知道一些好的和干净的解决方案，或者有任何想法我可以解决它？

Answer 1

关于监听编辑器的高度以触发添加另一个，在 Quill 的 API 内部或外部使用您自己的 vanilla 有很多方法。不是问题。

对于共享一个工具栏的多个编辑器，

这是一个来自 的线程打开 ，关于 QuillJS 的问题:

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

一个巧妙的解决方案来自 this评论 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.