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也可以由编辑器进行放大。

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

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

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

1 个答案: