javascript - 多个动态创建的鹅毛笔编辑器可以使用同一个工具栏吗

Question

我尝试将 Indesign 的轻型网页版本作为学生项目来实现。我动态创建一个应该是文本字段的 div。我想在每个文本字段内动态创建一个鹅毛笔编辑器。它们应该都链接到同一个工具栏，但似乎 quill 无法为我提供任何这些东西。

有人知道是否可以用 Quill 来实现，如果可以的话，如何实现？ 如果没有，有人知道我的替代方案吗？

我已经尝试将所有功能链接到同一个工具栏，有些功能会抛出错误，有些功能可以工作，但是当它们一起在所有编辑器上工作时，或者会发生其他奇怪的行为。

HTML:

<div id="toolbar-container">
    <span class="ql-formats">
        <select class="ql-size"></select>
    </span></div>
<div id="editor-container1"></div>
<div id="editor-container2"></div>  

JS:

var options = {
    modules: {
        toolbar: '#toolbar-container'
    },
    theme: 'snow'
};
new Quill('#editor-container1', options);
new Quill('#editor-container2', options);

Answer 1

我不确定您是否可以在多个鹅毛笔编辑器实例上绑定(bind)相同的工具栏，但我有一个解决方案。

您可以做的是使用多个“显示” View (例如，如果您使用过 ngx-quill，则它与 quill-view 和 quill-editor)。

这些 View 不可编辑，但可以显示鹅毛笔格式的内容。当您单击其中一个 View 时，您可以获得内容，将其绑定(bind)到鹅毛笔编辑器的实例，将编辑器放置在与“ View ”相同的位置/宽度' 区域并显示它。 像这样，您可以使用“共享”工具栏“伪造”编辑器的多个实例。它将与隐藏和显示在不可编辑区域上的工具栏和编辑器相同。

编辑: 这是一个工作示例 https://stackblitz.com/edit/ng-quill-editor?file=src/app/app.component.ts