Question

我尝试将Indesign的一个轻量级Web版本实现为一个学生项目。我动态地创建了一个div，该div应该是文本字段。我想在每个文本字段内动态创建一个主轴编辑器。它们应该都链接到同一个工具栏，但是对于我来说，羽毛笔似乎无法访问任何这些东西。

有人知道是否可以用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

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

相反，您可以使用多个“显示”视图（例如，如果您使用ngx-quill，则分别是quill-view和quill-editor）。

这些视图不可编辑，但可以显示羽毛笔格式的内容。单击其中的一个即可获取内容，将其绑定到羽毛笔编辑器实例，然后将编辑器放置在与视图相同的位置/宽度区域并显示它。这样，您可以使用“共享”工具栏“伪造”编辑器的多个实例。隐藏和显示在不可编辑区域的工具栏和编辑器将是相同的。

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

使用相同的工具栏动态创建笔芯编辑器

1 个答案: