CKEditor5——Plugin理解

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

CKEditor5——Plugin理解

今天开始理解学习CK5的插件类,整个类是所有插件的抽象,看看源码:

export default class Plugin {
	/**
	 * @inheritDoc
	 */
	constructor( editor ) {
		
		this.editor = editor;

		
		this.set( 'isEnabled', true );

		/**
		 * Holds identifiers for {@link #forceDisabled} mechanism.
		 *
		 * @type {Set.<String>}
		 * @private
		 */
		this._disableStack = new Set();
	}
}

从以上代码可以看出,每个插件有包含一个eidtor引用,因此,插件可以调用编辑器实例的任何方法,包括调用命令,判断editor的只读性等等。

这里有一个isEnabled属性,判断当前插件是否可用,以及一个设置插件可用性的Set集合。

插件的启用和禁用

然后再看看另外另个重要方法:

forceDisabled( id ) {
	this._disableStack.add( id );

	if ( this._disableStack.size == 1 ) {
		this.on( 'set:isEnabled', forceDisable, { priority: 'highest' } );
		this.isEnabled = false;
	}
}

/**
 * Clears forced disable previously set through {@link #forceDisabled}. See {@link #forceDisabled}.
 *
 * @param {String} id Unique identifier, equal to the one passed in {@link #forceDisabled} call.
 */
clearForceDisabled( id ) {
	this._disableStack.delete( id );
	if ( this._disableStack.size == 0 ) {
		this.off( 'set:isEnabled', forceDisable );
		this.isEnabled = true;
	}
}

这里如果需要禁用插件,只需要调用forceDisabled方法,这个方法很简单,就是将名字存储起来,然后绑定一个禁用的事件set:isEnabled,然后设置isEnabled为false。

同理,清除禁用就是将名字删除掉,并且全部删除掉,然后去掉绑定的set:isEnabled事件,设置isEnabled为true。

我们看看这个函数forceDisable

function forceDisable( evt ) {
	evt.return = false;
	evt.stop();
}

看到了吧,一旦我们禁用了插件,当我们再设置plugin.isEnabled的时候,就会触发这个回调函数,返回值为false,且停止后续回调函数的执行,因为这个优先级是最高,因此插件的这个属性值永远不会修改,它永远是false,因此这个插件永远不可用。当去掉这个事件监听后,这个属性isEnabled变回true,因此插件又变成可用啦。

大家应该理解这个原理了吧。

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

相关推荐

CKEditor5事件系统(代理事件)

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

RxJs——subject理解一

什么是subject首先我们来理解什么是subject,按照官方的定义:A Subject is a special type of Observable that allows values to be multicasted to many Observers.Subjects are like EventEmitters.从定义我们看出subject就是一种允许发送值到多个观察者的特殊类型的

RxJs——Subject理解二

上一节我们对subject有了初步理解,今天我们继续学习subjectReplaySubject介绍这个ReplaySubject之前,我们说下一种使用场景1、我们创建一个subject2、在应用的某个地方,我们向subject推送值,但此时没有订阅3、在某个时点,有第一个观察者开始订阅4、我们期望观察者能接收之前主题推送的值(可能是全部值或者时其中一个)5、实际上啥都没发生,因为主题不能存储记忆

CKEditor5——模型理解(一)

我们知道,CK5实现了一个MVC的架构,从今天开始,我们一步一步深入学习模型,视图,以及模型和视图之间的转换。今天我们开始模型的学习。首先,我们看模型的定义:The model is implemented by a DOM-like tree structure of elements and text nodes.模型由两类节点构成,分别是元素节点和文本节点,模型是一种类Dom树结构。我们知道

CKEditor5——模型理解(二:Node)

上一节我们理解了基本的CK5的模型基本信息,今天我们来学习一些模型的API。节点说明首先,需要理解的就是模型的节点。在这一点上,CK5的模型节点和dom的节点有点类似,也有一些不同。我会在文章中一一介绍。节点是模型树的基本结构。它是模型中不同节点类型的一种抽象。这里需要指出的一点是:如果一个节点从模型树中分离出来,你可以使用它的 API 来操作它。但是,非常重要的是,已经附加到模型树的节点只能通过

CKEditor5——模型理解(三:Element Text)

在上一节,我们学习了CK5中模型节点Node的API,今天我们学习另一个常用的API:Element。元素节点说明element表示模型的元素节点类型,它包含一个拥有名称和子节点的节点类型,继承自Node类。元素属性说明1、name,元素的名称举个例子哈,段落的名称是paragraph,代码块的名称是codeBlock等等。2、childCount, 子元素的数目这里指的是此元素节点包含的子元素的

CKEditor5——模型理解(五:Position, Range, Selection)

今天我们继续学习CK5中模型的一些知识,主要包括:Position, Range, Selection首先,我们需要知道:position表示模型树中的一个位置。模型的位置有两部分组成:root,path。即位置由其根和该根中的路径表示。位置基于偏移量,而不是索引。这意味着两个文本节点 foo 和 bar 之间的位置偏移为 3,而不是 1。由于模型中的位置由位置根和位置路径表示,因此可以创建不存在

CKEditor5——模型理解(六:Range)

上一节我们主要介绍了模型中的Position这个关键的类,今天我们开始学习Range这个类。简单来说的话,如果Position表示一个点的话,那么Range是不是可以理解为一条线段呢?这个线段有一个startPostion,endPosition以及线段的长度等属性,我们暂且这么认为,那么我们可以看看Range官方的文档。从文档中看到,Range类有五个属性:Range属性start:Positi

CKEditor5——模型理解(七:Selection)

昨天我们学习了Range的一些API使用,今天我们看看另一个重要的类Selection的API:Selection的作用是记录鼠标在文档上的选择区域,如果是单个用户在编辑一份文档的时候,选择应该就是一个Range,如果是多个用户在编辑一份文档的时候,那么选择的区域就应该是多个range。因此,我大胆的猜测,Selection中应该有Range数组。我们来看看吧。Selection属性anchor

RxJs——Subscription理解

我們前段時間學習了Observable相關的知識,今天我們學習另一個重要的概念:Subscription。首先,我們看看Subscription官方文檔的介紹如下:What is a Subscription? A Subscription is an object that represents a disposable resource, usually the execution of an