Изменение/захват нажатия клавиши с помощью CKEditor5

Я пытаюсь зафиксировать ввод внутри CKEditor5 в приложении Angular, используя машинописный текст. Я могу заставить CKEditor показывать и регистрировать присутствие редактора. Тем не менее, я не могу зафиксировать ввод. Это казалось довольно простым в CKEditor4, где работал простой код, подобный приведенному ниже:

editor.on('key', function (event) {
  //some work goes here
}

Однако попытка этого с моим текущим ClassicEditor, похоже, не имеет места. Я использую Angular и инициализировал CKEditor5 в index.html и вызываю его из кода в следующем формате.

declare var ClassicEditor: any;

export class AlterInput implements OnInit {
  ngOnInit() {
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .then(editor => {
            console.log("THIS GETS PRINTED", editor)
            editor.on('key', (event) => {
                                console.log('THIS DOES NOT GET PRINTED', event);
        })
        .catch( error => {
            console.error( error );
        } );
  }
}

Первоначально я создал плагин с помощью CKEditor4, что было сделано путем вызова CKEDITOR.plugins.add('pluginName', {\**some work in the init function**\})

Однако я не могу найти достойный пример того, как это сделать с помощью CKEditor5. Моя конечная цель - получить ключевой код введенного персонажа, добавить его и вставить.


typescript angular keyboard ckeditor ckeditor5
person sometimes24    schedule 08.04.2018    source источник

Ответы (1)


arrow_upward
8
arrow_downward

В CKEditor 5 гораздо больше событий, которые вы можете прослушивать, но они редко помещаются в сам класс Editor. Кроме того, событие keydown может запускаться несколькими частями редактора — самой областью редактирования и пользовательским интерфейсом редактора. Вам нужно знать, что именно вы хотите обработать, и подключить слушателя в нужном месте.

Прослушивание клавиш в области редактирования

Тот, который вас интересует, запускается в представлении Document (см. ссылку документы).

Приведенный ниже код полностью заблокирует A (поэтому ничего не вставляется в редактор) и просто распечатает все остальные ключи:

ClassicEditor
  .create( document.querySelector( '#editor' ) )
  .then( editor => {
    editor.editing.view.document.on( 'keydown', ( evt, data ) => {
        console.log( data );

      if ( data.keyCode == 65 ) {
        console.log( 'AAAAAA!!' );

        data.preventDefault();
        evt.stop();
      }
    } );
  } )
  .catch( error => {
      console.error( error );
  } );

Посмотрите демо здесь: https://jsfiddle.net/093at0rp/3/

Регистрация обработчиков нажатия клавиш

Другой вариант — использовать обработчик нажатий клавиш редактора.

ClassicEditor
  .create( document.querySelector( '#editor' ) )
  .then( editor => {
    editor.keystrokes.set( 'A', ( data, stop ) => {
        console.log( data );
        stop(); // Works like data.preventDefault() + evt.stop()
    } );
    editor.keystrokes.set( 'Ctrl+S', ( data, stop ) => {
        console.log( data );
    } ); 
  } )
  .catch( error => {
      console.error( error );
  } );

Посмотрите демо здесь: https://jsfiddle.net/093at0rp/7/

Преимущество обработчика нажатия клавиш заключается в том, что вы можете быстро привязать команду к нажатию клавиши и легко записать нажатия клавиш в удобочитаемом виде:

// Will execute the bold command when Ctrl+B is pressed.
editor.keystrokes.set( 'Ctrl+B', 'bold' );

view.Document#keydown срабатывает при нажатии клавиш в режиме редактирования. То же самое верно и для обработчика нажатия клавиш редактора — он только слушает редактируемое представление.

Однако события keydown также могут запускаться в пользовательском интерфейсе редактора (например, когда у вас есть фокус на вводе всплывающей подсказки редактирования URL-адреса ссылки). Если вы хотите прослушивать эти события, вам нужно найти правильные элементы DOM для подключения ваших слушателей.

person Reinmar    schedule 11.04.2018
comment
Знаете ли вы, как выполнить команду Delete или другие команды из пакета Typing с помощью CKEditor5? - person sometimes24; 08.05.2018