一页中有多个 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>

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

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

Answer 1

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

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

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