Multiple CKEditor5 in one page - performance issue

Question

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?

Answer 1

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