如何在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 函数无法fired.how 解决此问题？

Answer 1

试试这个

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

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

Answer 2

根据文档event-key事件应该是这样的

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 3

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

如何在ckeditor中使用onKeyUp函数

How to use onKeyUp function in ckeditor

javascript

jquery

ckeditor