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

Question

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

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

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

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

Answer 1

关于侦听编辑器的高度以触发添加新高度，在Quill的API内或您自己的香草之外有很多方法。没问题。

至共享单个工具栏的多个编辑器，

这里是一个来自QuillJS的线程，仍然是一个[[Open；]Consider allowing multiple editors on the same page & to use the same toolbar. #633

一个简单的解决方案是this的Pawel Glowacki评论

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

我正在使用此羽毛笔三角洲添加到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时创建一个新的实例没有引起任何问题。