Как использовать функцию onKeyUp в ckeditor

Question

Я использую CKeditor на своей странице и пытался подсчитать оставшиеся символы в методе KeyUp.

Вот мой код

HTML

<div class="row">
  <div class="col-xs-12 col-sm-6 inputBlock textareaRegion">
  <div id="editor1" class="textarea"></div>
  <label class="showLabel">Comments</label><div class="maxlengthCountDiv">Remaining character length:<span class="maxlengthCount"></span></div>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-6 inputBlock textareaRegion">
  <div id="editor2" class="textarea"></div>
  <label class="showLabel">Comments</label><div class="maxlengthCountDiv">Remaining character length:<span class="maxlengthCount"></span></div>
</div>

И заменить его с помощью CKeditor, также настраивая панель инструментов

  CKEDITOR.replace( 'editor1' );
  CKEDITOR.replace( 'editor2' );

CKEDITOR.config.toolbar = [
       ['Styles','Format','Font','FontSize'],
       ['Bold','Italic','Underline','StrikeThrough','-','Undo','Redo','-','Cut','Copy','Paste','Find','Replace','-'],
       ['NumberedList','BulletedList'],
    ] ;

код JavaScript

$(document).on("keyup", ".textarea", function (event) {
        var textCount="";
        var textLimit = 1500;
        var deleteKey = 46;
        var backspaceKey = 8;
        var keyCode = event.keyCode;
        if (keyCode === deleteKey || keyCode === backspaceKey){
            var str = $(this).text();
            var currentCount = parseInt($(this).parents('.textareaRegion').find('.maxlengthCountDiv .maxlengthCount').text());
            if(currentCount < textLimit){
                textCount = currentCount + 1;
                $(this).parents('.textareaRegion').find('.maxlengthCountDiv .maxlengthCount').empty().html(textCount);
            }

            return true;
        }
        else{
            var str = $(this).text();
            if (str.length >= 1500)
            {
                return false;
            }
            else{
                textCount = textLimit - str.length;
                $(this).parents('.textareaRegion').find('.maxlengthCountDiv .maxlengthCount').empty().html(textCount);
            }
        }
    });

Функция KeyUp не запускается. Как решить эту проблему?

Answer 1

Согласно документации событие-ключ событие должно быть таким

editor.on( 'key', function( evt ) {
  if ( evt.data.keyCode == CKEDITOR.CTRL + 90 ) {
    // Do something...

    // Cancel the event, so other listeners will not be executed and
    // the keydown's default behavior will be prevented.
    evt.cancel();
  }
} );

Answer 2

Помимо того, что написал @Artem Dorodovskiy (это рекомендуемый подход), вы также можете прикрепить keyup, keydown события непосредственно к editable, например, так:

var editor = CKEDITOR.replace( 'editor1', {});
editor.on( "pluginsLoaded", function( event ){
    editor.on( 'contentDom', function( evt ) {
        var editable = editor.editable();                   
        editable.attachListener( editable, 'keyup', function( e ) { 
            // do something
        });
    }); 
});

Answer 3

Попробуйте это

CKEDITOR.instances.editor1.on('key', function(evt) { 
                console.log(evt.data.keyCode);
            });

CKEDITOR.instances.editor2.on('key', function(evt) { 
                console.log(evt.data.keyCode);
            });