敲碎时间,铸造不朽的个人专栏
上一篇

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()解除绑定的函数,是否有参数决定解除绑定的粒度问题。

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

X

欢迎加群学习交流

联系我们