ckeditor - 一页中有多个 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 也被编辑器放大了。

运行如此多的编辑器肯定会降低您的页面速度，我们不推荐这样做(由于上述问题，任何编辑器都会发生这种情况)。该问题可能有一些或多或少的复杂解决方案:

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