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

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

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

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

Multiple CKEditor5 in one page - performance issue

ckeditor

angular6

ckeditor5