CKEditor5事件系统(基础使用)

最近在学习CK5,一种最大的感受就是CK5的架构不是很大,但是内容特别多。笔者在学习中,总结出一个浅显的薄理,那就是如果掌握了基础知识,再加上宏观上的把握,学习起来会事半功倍。

 

今天开始研究一下CK5的事件系统:

emitters是一个可以发送时间的对象。

import EmitterMixin from '@ckeditor/ckeditor5-utils/src/emittermixin';
import mix from '@ckeditor/ckeditor5-utils/src/mix';
class AnyClass {
   // ...
}
mix( AnyClass, EmitterMixin );

上面的代码来自CK5的官网,分析以上代码,可以看出核心的类有两个,一个是EmitterMixin,另一个是mix。

不难看出,第一个是实现了事件系统的核心类,而mix方法只是将核心功能复制到具体类。

Emitter的On和Off分析

有了以上代码后AnyClass就是一个具有监听和发送时间的类,因此可以有以下代码:

AnyClass.on( 'eventName', ( eventInfo, ...args ) => { ... } );

这个AnyClass类就可以监听一个名为eventName的事件,一旦触发这个事件,那么就会执行后面的回调函数。

再次用另一段代码来说明问题

splitButtonView.on( 'execute', () => {
	editor.execute( 'newCodeBlock', {
		usePreviousLanguageChoice: true
	} );
	editor.editing.view.focus();
} );

看到了吧,这段代码的意思是,一旦在splitButtonView触发execute事件,那么就会执行回调函数。这里需要注意的是:

  1. splitButtonView是一个emitter对象
  2. 触发事件只能在这个splitButtonView对象上,也就是自己监听自己

如果要移除监听呢?

AnyClass.off( 'eventName', handler );

简单吧。

Emitter的listenTo和stopListening分析

CK5还提供了另一种监听方式:

AnyClass.listenTo( AnotherClass, 'eventName', ( eventInfo, ...args ) => { ... } );

这里的意思就是emitter:AnyClass 监听 emitter:AnotherClass上的eventName事件,如果后者触发了这个事件,那么回到函数会理解执行。

this.listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
    console.log('clipboardInput');
    let insertionRange = model.createRange( model.document.selection.anchor );
 
    // Use target ranges in case this is a drop.
    if ( data.targetRanges ) {
          insertionRange = editor.editing.mapper.toModelRange( data.targetRanges[ 0 ] );
    }
 
    if ( !insertionRange.start.parent.is( 'element', 'newCodeBlock' ) ) {
          return;
    }
 
    const text = data.dataTransfer.getData( 'text/plain' );
    const writer = new UpcastWriter( editor.editing.view.document );
 
    // Pass the view fragment to the default clipboardInput handler.
    data.content = rawSnippetTextToViewDocumentFragment( writer, text );
} );

上面的代码我是从一个插件类中摘取出来的,this就代表这个插件类,而这个插件类会监听这个对象:

editor.editing.view .document

而监听的事件是剪贴板在视图文档的输入,其实说人话就是当我们复制一些内容到CK5的内容去的时候,这个插件的回调函数就会执行。

同样的道理,如果想移除对某个emitter的监听:

// Stop listening to a specific handler.
AnyClass.stopListening( AnotherClass, 'eventName', handler );
// Stop listening to a specific event.
AnyClass.stopListening( AnotherClass, 'eventName' );
// Stop listening to all events fired by a specific emitter.
AnyClass.stopListening( AnotherClass);
// Stop listening to all events fired by all bound emitters.
AnyClass.stopListening();

进过这些介绍,我想大家应该明白emitter的on和listenTo方法的区别和怎么使用了吧。

版权声明:著作权归作者所有。

相关推荐

Angular使用keydown监听tab键事件处理

在html中,在焦点元素上按下tab键,它会跳到下一个可聚焦元素(按钮、输入等)。如果监听的是keyup,当按下tab放开时,焦点元素已经变为下一个可聚焦元素。在前面的焦点元素上做监听keyup是不会触发事件的处理handler的。为了避免焦点元素的变化这个问题,可以使用keydown监听tab键。Angular监听tab键示例示例:<input (keydown.Tab)="onKey($

CKEditor5正确添加插件的方法

CKEditor5添加插件错误ckeditor-duplicated-modules本来想在CKEditor 5的ckeditor5-build-classic添加一个Code Block插件,按官方文档,先安装@ckeditor/ckeditor5-code-blocknpm install --save @ckeditor/ckeditor5-code-block然后再代码中引入使用:impo

Linux使用halt命令关闭运行中操作系统

halt命令用来关闭正在运行的Linux操作系统。halt命令会先检测系统的runlevel,若runlevel为0或6,则关闭系统,否则即调用shutdown来关闭系统。 语法 halt [-n] [-w] [-d] [-f] [-i] [-p] 选项说明 -d:不要在wtmp中记录;-f:不论目前的runlevel为何,不调用shutdown即强制关闭系统;-i:在halt之前,关闭全部的

Linux 系统用户账号的管理

1. 用户账号的优势 帮助系统管理员对使用系统的用户进行跟踪 控制用户对系统资源的访问 帮助用户组织文件,为用户提供安全保护 2. 添加新的用户添加命令useradd 选项 用户名常用选项-d<目录>, 设置用户主目录,默认值为用户的登录名,并放在 /home 目录下;如果此目录不存在,则同时使用 -m 选项,可以创建主目录。-g<用户组>,指

boa移植到android系统

参考网址:https://blog.csdn.net/u011311586/article/details/51037240注意事项:1、编译要交叉编译2、编译要添加成 -static3、修改cgi访问路径char str[]="/IntelligentCabinetAPIServer"; char *p=NULL; p=strstr(req->request_uri,str); if(p)