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

Question

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

我只想创建另一个羽毛笔实例并将其聚焦，但这会创建另一个工具栏（尚不支持用于多个编辑器的单个工具栏，但有pr的用途）

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

有谁知道一些不错且干净的解决方案，或者对我如何解决有任何想法？

Answer 1

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

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

这是 QuillJS 上的一个线程，仍然是一个Open问题：

考虑允许多个编辑器在同一页面上并使用相同的工具栏。第633章

一个巧妙的解决方案来自Pawel Glowacki的评论

3. 仅在活动框中初始化 Quill 编辑器，并销毁以前的编辑器 + 一个工具栏 这是我今天使用的解决方案，它带来了最佳性能和一些干净的解决方案。当活动框更改时，我获取 Quill 实例内容，删除之前的 Quill 事件 + 实例，并更新 DOM，因为编辑器创建的 HTML 不会自动删除。

我正在使用这个 quill delta to html 插件

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(); //如果需要的话，初始化任何事件 Quill 的缺点是不使用单个工具栏管理编辑器的多个实例并不是一个大问题，但它确实需要您自己进行研究/测试+添加逻辑，这可以是一个麻烦。

我希望有人觉得这很有用。

如果您需要同时跟踪多个 Quill 实例，请创建一个 JavaScript 对象并将它们存储在某个键下。

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

我也无法在 Quill 文档中找到更好的解决方案，但我有一个非常大的应用程序，它可以处理 50 多个工具栏，并销毁工具栏，然后每次创建新的 Quill 实例时创建一个新工具栏，这不会引起任何问题。