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

avatar
sometimes24
8 апреля 2018 в 04:39
4076
1
5

Я пытаюсь зафиксировать ввод внутри 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. Моя конечная цель — получить ключевой код введенного символа, добавить его и вставить.

Источник

Ответы (1)

avatar
Reinmar
11 апреля 2018 в 15:26
11

В 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 для подключения ваших слушателей.

sometimes24
8 мая 2018 в 02:02
0

Знаете ли вы, как выполнить команду Delete или другие команды из пакета Typing с помощью CKEditor5?