Несколько 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>

Он отлично работает, когда массив речей до 30-40, но для большего он даже может вызвать сбой браузера.

Кто-нибудь сталкивался с этой проблемой и решил ее?

Answer 1

Каждый <ckeditor> Компонент занимает ~5 МБ памяти из-за внутренней абстрактной модели. Он слушает различные глобальные события, а также предоставляет собственную панель инструментов с различными кнопками, поэтому редактор также расширяет DOM.

Конечно, запуск такого количества редакторов замедлит вашу страницу, и мы не рекомендуем этого (это случится с любым редактором из-за проблем, перечисленных выше). Может быть несколько более или менее сложных решений этой проблемы:

• Инициализируйте редактор только после нажатия на редактируемый элемент. Уничтожить старый редактор по событию размытия или щелкнуть по второму редактируемому элементу и инициализировать новый по заданному тексту - для этого потребуется создать простую обертку над элементом
• Создайте некоторую нумерацию страниц, чтобы уменьшить количество редакторов, работающих на странице
• Инициализируйте редакторы, когда они видимы, и уничтожайте их, когда они больше не видны.