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

Question

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

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

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

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

Answer 1

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

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

这是来自 QuillJS 上的一个主题，仍然是 Open，问题：

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

一个简洁的解决方案来自thisPawel 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(); //如果你想初始化任何on events Quill 不使用单个管理编辑器的多个实例 工具栏不是一个大问题，但它确实需要你做 研究/测试 + 自己添加逻辑，这可能很麻烦。

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

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

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

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