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

Question

我尝试将 Indesign 的轻型 Web 版本作为学生项目实现。我动态创建了一个应该是文本字段的 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

我不确定您是否可以在多个 quill-editor 实例上绑定(bind)相同的工具栏，但我有一个解决方案。

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

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

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