Событие ввода ключа CKEditor и получение данных из встроенных редакторов

#javascript #ckeditor

#javascript #ckeditor

Вопрос:

Я пытаюсь создать документ с несколькими встроенными полями CKEditor, и keyup запускает меня в цикл. Событие «key» работает нормально (но не вводит последний введенный символ), однако «keyups» вообще не перехватывается, если я не использую editor.document.on, что с радостью предоставили несколько других ответов.

К сожалению, поскольку у меня есть несколько (более 13) возможных полей, событие, похоже, не возвращает с ним ничего, кроме самого события. Ни целевой информации (мне нужен идентификатор для передачи в мою функцию сохранения данных), ни редактора (для извлечения содержимого).

Цель состоит в том, чтобы сохранять и проверять вводимые данные по мере их ввода. Я называю их полями в своем уме, но все они являются divs (таким образом, встроенное редактирование).

Javascript:

 $(function(){

CKEDITOR.disableAutoInline = true;

$("div[contenteditable='true']" ).each(function( index ) {

    var content_id = $(this).attr('id');

    CKEDITOR.inline( content_id, {
        customConfig: '/majors/ckconfig.js'} );      
});


CKEDITOR.document.on('keyup', function(event){
      console.log(event.editor.getData()); // need to get the data, and the ID of the element.      
});
});
  

Ответ №1:

Почему вы не используете событие editor#change?

 var editor = CKEDITOR.inline( content_id,
    { customConfig: '/majors/ckconfig.js' } ); 

editor.on( 'change', function() {
    console.log( editor.getData() );
} );
  

Что касается keydown, если вы все еще заинтересованы, вы можете добавить прослушиватель непосредственно к редактируемому элементу:

 var editor = CKEDITOR.inline( content_id,
    { customConfig: '/majors/ckconfig.js' } ); 

editor.on( 'contentDom', function() {
    var editable = editor.editable();
    editable.attachListener( editable, 'keyup', function() {
        console.log( editor.getData() );
    } );
} );
  

Подробнее об используемых методах читайте в editable#attachListener документации по методу.

Комментарии:

1. Потрясающе, спасибо! Решением стало событие on-change. Обычно я избегаю этого события для других элементов HTML-формы, потому что обычно кажется, что в нем отсутствуют некоторые действия, которые я мог бы считать «изменениями». В этом случае, я думаю, собственная реализация CKEDITOR, похоже, улавливает все, что я ищу.