Modifying/Capturing 使用 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 class 本身中。此外，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 中触发（例如，当您在 link URL 编辑气球的输入中获得焦点时） .如果您想监听这些事件，那么您需要找到合适的 DOM 元素来插入您的监听器。

Modifying/Capturing 使用 CKEditor5 按键

Modifying/Capturing key press with CKEditor5

keyboard

ckeditor

typescript

angular

ckeditor5

在编辑区听按键

正在注册击键处理程序