javascript - 如何使用ckeditor中的onKeyUp函数

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

除了@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
        });
    }); 
});