Прослушивание события, запущенного при изменении содержимого в CKEditor 5

как я могу прослушать событие "input" в ckeditor5 ? Я хотел бы иметь возможность использовать Observables такой:

Observable.fromEvent(this.editor, "input").debounceTime(250).subscribe(() => {});

до сих пор я был в состоянии слушать некоторые события, как это:

Observable.fromEvent(this.editor.editing.view, 'selectionChangeDone').subscribe(() => { });

но я не нахожу имя события, которое будет запущено, как только данные будут изменены в Редакторе. Я попытался "изменить", но он срабатывает только тогда, когда редактор получает или потерял фокус.

7
ckeditor ckeditor5 reactjs

2 ответов

начиная с CKEditor5 v11.0.0 (с 21 июля 2018 года)

что ты наверное нужен Document#change:data событие, вызванное документом редактора.

editor.model.document.on( 'change:data', () => {
    console.log( 'The data has changed!' );
} );

это событие запускается, когда документ изменяется таким образом, который "виден" в данных редактора. Существует также группа изменений, таких как изменения позиции выбора, изменения маркера, которые не влияют на результат editor.getData(). Чтобы слушать все эти изменения, вы можете использовать более широкий Document#change событие:

editor.model.document.on( 'change', () => {
    console.log( 'The Document has changed!' );
} );

до CKEditor5 v11.0.0

что ты наверное нужен change событие, вызванное документом редактора.

editor.model.document.on( 'change', () => {
    console.log( 'The Document has changed!' );
} );

как говорится в документации этого события:

уволен после каждого enqueueChange() блок или внешней change() блок был выполнен, и документ был изменен во время этого блока исполнение.

изменения, которые это событие будет охватывать, включают:

  • изменения структуры документа,
  • изменения выбора,
  • изменения маркера.

если вы хотите получать уведомления обо всех этих изменениях, просто слушайте это событие следующим образом:

  model.document.on( 'change', () => {
      console.log( 'The Document has changed!' );
  } );

Если, однако, вы хотите получать уведомления только об изменениях структуры, проверьте, является ли differ содержит любые изменения:

  model.document.on( 'change', () => {
      if ( model.document.differ.getChanges().length > 0 ) {
          console.log( 'The Document has changed!' );
      }
  } );

последний фрагмент кода полезен при реализации таких функций, как автоматическое сохранение.

16

прежде всего, я вижу, что вы используете Observable.fromEvent который, кажется, является частью RxJS и работает с событиями jQuery. CKEditor 5 не использует RxJS или jQuery. Он использует пользовательские события и пользовательские наблюдаемых которые чем-то отличаются от наблюдаемых, которые вы хотите использовать.

Итак, обратите внимание, что:

Observable.fromEvent(this.editor.editing.view, 'selectionChangeDone');

не является правильным способом прослушивания события и работает, скорее всего, только из-за некоторых утиной типизацией.

в правильный способ прослушивания событий CKE5:

this.editor.editing.view.on( 'selectionChangeDone', () => { /*...*/ } );

во-вторых, "ввод" - это не событие, а команда. Если вы хотите прослушать выполнение этой команды, вы можете сделать:

this.editor.commands.get( 'input' ).on( 'execute', ( evt, args ) => {
    console.log( evt, args );
} );

однако это очень свежий API, который будет представлен в следующей версии ckeditor-core (0.9.0), поэтому вам нужно использовать текущую главную ветвь для ее использования.

5