5

我正在尝试使用打字稿在 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 来做到这一点。我的最终目标是获取输入字符的键码，添加一个，然后粘贴。

4

1 回答 1

11

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

聆听编辑区的按键

您感兴趣的将在视图文档中触发（请参阅文档）。

下面的代码将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/

注册击键处理程序

另一种选择是使用编辑器的击键处理程序。

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

于 2018-04-11T15:26:26.230 回答