CKEditor5事件系统(基础使用)

选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。

最近在学习CK5,一种最大的感受就是CK5的架构不是很大,但是内容特别多。笔者在学习中,总结出一个浅显的道理,那就是

掌握基础知识,对框架宏观把握,学习起来会事半功倍。

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

在CK5的事件系统中,关键的一个对象被称作Emitter(发射器),Emitter是一个可以发送事件的对象。如何创建一个Emitter,下面的代码创建了一个混合了事件发送的AnyClass类,它实例化以后就是一个可以发送事件的Emitter对象

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

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

不难看出:

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

Emitter的On和Off分析

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

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

这个anyClass对象就可以监听一个名为eventName的事件,一旦触发(anyClass.fire('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还提供了另一种监听方式:

const anyClass = new AnyClass();
//注意,这里假定AnotherClass也是一个Emitter
const anotherClass = new AnotherClass();
AnyClass.listenTo( anotherClass, 'eventName', ( eventInfo, ...args ) => { ... } );

这里的意思就是emitter:anyClass 监听 emitter:anotherClass上的eventName事件,如果后者(anotherClass.fire('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的监听:

const anyClass = new AnyClass();
//注意,这里假定AnotherClass也是一个Emitter
const anotherClass = new AnotherClass();
// 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方法的区别和如何使用了吧,以及stopListening()方法的使用。

总结一下:

1、emitter的on方法绑定的函数是通过自身来触发的。

2、emitter的listenTo方法是通过其他emitter来触发的。

3、stopListening()解除绑定的函数,是否有参数决定解除绑定的粒度问题。

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

相关推荐

winsw快速注册Windows系统服务

winsw(Windows Service Wrapper)是一个开源项目,它可以让我们快速把一个可执行的程序注册为Windows的系统服务。下载安装下载地址:https://github.com/kohsuke/winsw/releases,如图:下载对应平台的.exe(.net2和.net4)。下载地址提供了两份配置文件:sample-allOptions.xml:包含所有配置项 s

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)

Linux 系统用户账号的管理

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

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

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

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

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

CKEditor5事件系统(事件优先级)

今天继续学习CK5的事件系统,上一节我们知道了绑定和取消绑定事件的两种方法,知道在一个emitter上一个同名事件可以绑定多个回调函数,自然问题来了,这些函数的执行顺序是怎么样的呢?CK5的事件监听优先级实际上,对于一个同名事件,CK5提供了事件优先级功能,如下代码所示const anyClass = new AnyClass(); anyClass.on( 'eventName', ( even

CKEditor5事件系统(代理事件)

emitter接口提供了事件代理机制。也就是说指定选择的事件能够被其他的emitter触发。 1、代理指定的事件到另一个emitterlet anyClass = new AnyClass(); let anotherClass = new AnyClass(); let oneClass = new AnyClass(); anotherClass.on('bar',(evt,data