一页中有多个 CKEditor5 - 性能问题

Question

我从后端收到一个对象数组，其中包含文本作为字段之一。我希望能够编辑该文本。

到目前为止，我有这样的事情：

 <div *ngFor="let speech of speeches; index as i">
      <div class="card">
        <div class="card-header">
          <div class="row">
           //some other input fields
        <div class="card-body">
          <ckeditor [(ngModel)]=speech.content
                    [editor]="editor"
                    name={{i}}
                    required
                    [config]="ckeConfig"
                    debounce="500"
                    (change)="onChange($event)">
          </ckeditor>
        </div>
      </div>
  </div>

当 Speeches 数组达到 30-40 左右时它可以正常工作，但对于更大的它甚至会导致浏览器崩溃。

有人遇到过这个问题并解决了吗？

Answer 1

由于内部抽象模型，每个 <ckeditor> 组件占用约 5MB 内存。它监听各种全局事件，并提供了自己的工具栏和各种按钮，因此 DOM 也被编辑器放大。

运行如此数量的编辑器肯定会降低您的页面速度，我们不建议这样做（由于上面列出的问题，任何编辑器都会发生这种情况）。对于这个问题，可能有一些或多或少复杂的解决方案：

• 仅在单击可编辑元素后初始化编辑器。在模糊事件上销毁旧编辑器或单击第二个可编辑元素并在给定文本上初始化新编辑器 - 这需要在元素上创建一个简单的包装器
• 创建一些分页以减少页面上运行的编辑器数量
• 编辑器可见时初始化，不可见时将其销毁