Question

我正在尝试使用typescript捕获Angular应用程序中CKEditor5内的输入。我可以让CKEditor显示并能够记录编辑器的存在。但是，我似乎无法捕获输入。在CKEditor4中，这似乎非常简单，其中一个简单的代码如下所示：

editor.on('key', function (event) {
  //some work goes here
}

然而，尝试使用我当前的ClassicEditor似乎并非如此。我正在使用Angular并在index.html中初始化了CKEditor5，并在代码中以下列格式调用它

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这样做的好例子。我的最终目标是获取输入字符的关键代码，添加一个并粘贴它。

Answer 1

在CKEditor 5中，您可以收听更多事件，但它们很少放在Editor类本身。此外，keydown事件可以由编辑器的多个部分触发 - 编辑区域本身和编辑器的UI。您需要知道自己想要处理什么，并将听众插入正确的位置。

聆听编辑区域中的键

您感兴趣的人会在视图文档中被解雇（请参阅docs）。

以下代码将完全阻止 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/

注册击键处理程序

另一种选择是使用编辑器keystroke handler。

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元素来插入你的听众。

使用CKEditor5修改/捕获按键

1 个答案:

聆听编辑区域中的键

注册击键处理程序