使用 CKEditor5 修改/捕获按键

Question

我正在尝试使用打字稿在 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 事件也可以在编辑器的 UI 中触发（例如，当您在链接 URL 编辑气球的输入中获得焦点时）。如果你想监听这些事件，那么你需要找到合适的 DOM 元素来插入你的监听器。