CKeditor5 blur事件如何绑定【已解决】

在ckeditor 4的时候绑定blur事件代码如下：

window.editor.on('blur',function (){
      //这里写你想做的事儿
})

同样的代码搬到ckeditor 5 不仅不能用，还报错。

目前ckeditor5的代码如下：

html部分

<div id='editor'></textarea>

js部分

ClassicEditor
    .create( document.querySelector( '#editor' ), {} )
    .then( editor => {
        editor.on("blur", function(){alert("hello world");});
    } )
    .catch( err => {
        console.error( err.stack );
    } );

[user]

解决办法

editor.ui.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
    if ( !isFocused ) {
        // 这里写你的业务逻辑，参考下面获取编辑器内容
        console.log( editor.getData() );
    }
} );

完整代码

ClassicEditor
    .create( document.querySelector( '#editor' ), {} )
    .then( editor => {
        editor.on("blur", function(){alert("hello world");});

        //重点
        editor.ui.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
          if ( !isFocused ) {
              // 这里写你的业务逻辑，参考下面获取编辑器内容
              console.log( editor.getData() );
            }
        } );

    } )
    .catch( err => {
        console.error( err.stack );
    } );

[/user]

从上面代码看，ckeditor4 和ckeditor5 版本的配置bulr事件区别还是蛮大的。

ckeditor ckeditor5

版权所有 © 【代码谷】 欢迎非商用转载，转载请按下面格式注明出处，商业转载请联系授权，违者必究。（提示：点击下方内容复制出处）

源文：《CKeditor5 blur事件如何绑定【已解决】》，链接：https://www.daimagu.com/article/ckeditor5-blur.html，来源：【代码谷】