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

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

我只想创建另一个quill实例并将焦点放在其中，但这将创建另一个工具栏（目前还不支持多个编辑器使用单个工具栏，但有pr）

现在，我只是创建一个分隔符，它是一个

div

元素，与白色页面后面的背景颜色相同

---

有谁知道一些好的、干净的解决方案，或者有什么想法我可以解决吗？

关于如何从编辑的高度来触发添加另一个，在Quill的API中有许多方法，或者在外部使用您自己的香草。没问题

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

以下是QuillJS上的一个帖子，仍然是一个开放的：

一个简洁的解决方案是来自

3。仅在活动框内初始化羽毛笔编辑器并销毁以前的编辑器+一个工具栏这是我正在使用的解决方案 今天，它的结果是最好的性能和一些清洁 解决方案当活动长方体更改时，我将获得羽毛笔实例 内容，删除以前的Quill events+实例，然后更新 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不使用单个控件管理编辑器的多个实例 工具栏不是一个大问题，但它确实需要您执行以下操作： 研究/测试+自己添加逻辑，这可能会很麻烦

我希望有人觉得这有用

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

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

我也无法在羽毛笔文档中找到更好的解决方案，但我 有一个非常大的应用程序，可以处理50多个工具栏并销毁 工具栏，然后每次创建新羽毛笔时创建一个新的 实例未导致任何问题

---

你好我也有同样的问题？你找到一些解决方案了吗？我只是不明白每页生成一个羽毛笔编辑器的好处。对于我来说，分隔块元素似乎是一个很好的解决方案，因为您的所有文档（所有页面）都在同一个Quill.getContents（）中；问题是根据内容以编程方式更改块位置。您可以使用剪贴板方法，在添加的每个字符上显示是否需要以不同的方式放置？虽然这适用于注释中提到的多个编辑器，但它不足以实现页面。由于页面一个接一个地排列，内容可能会从一个页面溢出到另一个页面，或者用户可以选择所有页面的内容进行格式化，这是成功处理多个编辑器后要解决的另一个问题。您可以始终循环浏览编辑器集合（例如上面的

窗口编辑器
）并应用格式。如果您想从所有页面中选择所有文本，您可能会使用Ctrl+A，我们也可以通过编程方式处理。在这种情况下，您将如何处理从一个页面到另一个页面的溢出内容？还没有解决子字符串从一个编辑器传递到另一个编辑器的问题。理想情况下，我们可以听输入，我想在活动编辑器中交叉检查字符串的长度及其最大值。非常困难的部分，以获得完整功能。但愿如此。编辑器工具栏将具有字体大小或插入图像的功能，这将完全搞乱子字符串