Несколько CKEditor5 на одной странице - проблема производительности - PullRequest
Новая
       7

Несколько CKEditor5 на одной странице - проблема производительности

0 голосов
/ 04 декабря 2018

Из бэкэнда я получаю массив объектов, который содержит текст в качестве одного из полей.Я хотел бы иметь возможность редактировать этот текст.

Пока у меня есть что-то вроде этого: 

 <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, но для большихэто даже может привести к сбою браузера.

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

1 Ответ

0 голосов
/ 07 декабря 2018

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

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

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