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

CKEditor5事件系统(视图事件冒泡)

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

CK5的视图(view.document)不仅是一个Observable和emitter,而且还实现了一个BubblingEmitter,它是由BubblingEmitterMixin实现的。它提供了在虚拟dom机制上的冒泡事件。

 

它与普通的dom树上的冒泡机制不同。它不会在特定的元素上注册监听器,而是在指定的上下文上注册监听器。

这里的上下文,要么是一个元素,要么是虚拟上下文之一,要么是匹配节点的回调函数。

 

注册在视图元素上的监听器

this.listenTo( view.document, 'enter', ( evt, data ) => {
   // ...
}, { context: 'blockquote' } );
this.listenTo( view.document, 'enter', ( evt, data ) => {
   // ...
}, { context: 'li' } );

这里的监听器注册在blockquote和li元素上。

注册在虚拟上下文中的监听器

this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
   // ...
}, { context: '$text', priority: 'high' } );
this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
   // ...
}, { context: '$root' } );
this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
   // ...
}, { context: '$capture' } );

这里的监听器注册在$text, $root和$capture上。

注册在自定义回调函数的上下文上的监听器

import { isWidget } from '@ckeditor/ckeditor5-widget/src/utils';
this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
   // ...
}, { context: isWidget } );
this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
   // ...
}, { context: isWidget, priority: 'high' } );

这里的监听器注册在isWidget上。

 

这里我们只需要知道有这三种情况就好,以后我们会用例子来说明事件的传播顺序。

 

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

X

欢迎加群学习交流

联系我们