一页中有多个 CKEditor5 - 性能问题 [英] Multiple CKEditor5 in one page - performance issue

问题描述

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

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

 
<div class="card"><div class="card-header"><div class="row">//其他一些输入字段<div class="card-body"><ckeditor [(ngModel)]=speech.content="编辑器"姓名={{i}}必需的[配置]="ckeConfig"去抖动=500"(change)="onChange($event)"></ckeditor>

当语音数组达到大约 30-40 时它工作正常，但如果更大它甚至会导致浏览器崩溃.

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

解决方案

由于内部抽象模型，每个 组件需要大约 5MB 的内存.它侦听各种全局事件，还提供了自己的带有各种按钮的工具栏，因此 DOM 也被编辑器放大了.

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

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

From backend I receive an array of objects that contains text as one of the field. I would like to have ability to edit that text.

So far I have something like this:

 <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>

It works fine when speeches array is up to about 30-40 but for larger it even can cause the browser to crash.

Does anyone have faced this issue and resolved it?

解决方案

Each <ckeditor> component takes ~5MB of memory because of the internal abstract model. It listens to various global events and also provides its own toolbar with various buttons, so the DOM is enlarged by the editor too.

For sure running such number of editors will slow down your page and we don't recommend it (It will happen with any editor because of the problems listed above). There might be a few more or less complicated solutions to that problem:

• Initialize the editor only after clicking on an editable element. Destroy old editor on blur event or clicking on the second editable element and initialize new one on the given text - it would require creating a simple wrapper over the element
• Create some pagination to decrease the number of editors running on a page
• Initialize editors when they're visible and destroy them when they are no longer visible

这篇关于一页中有多个 CKEditor5 - 性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！