CKEditor5事件系统(基础使用)
最近在学习CK5，一种最大的感受就是CK5的架构不是很大，但是内容特别多。笔者在学习中，总结出一个浅显的道理，那就是掌握基础知识，对框架宏观把握，学习起来会事半功倍。今天开始初步研究一下CK5的事件系统：在CK5的事件系统中,关键的一个对象被称作Emitter(发射器),Emitter是一个可以发送事件的对象。如何创建一个Emitter，下面的代码创建了一个混合了事件发送的AnyClass类，它实
ck5
CKEditor5 UI——UI组件
CK5提供了一个标准UI库，这个库是由@ckeditor/ckeditor5-ui实现的。我们首先需要理解的是CK5的UI组件都是用模板来构建的，因此，我们首先明白什么是模板？UI组件在CK中又称为视图，视图是模板通过渲染后得到的。视图首先，我们定义一个视图：import {View} from 'ckeditor5/src/ui'; export default class InputView
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——Conversion理解
大家知道，在CKEditor5中，Conversion（转化器）是最重要的一个组件之一，为了深入的理解转化器，我们先从大的层面来掌握一下，以后再分别从细节入手。我们从上面的图中不难看出，总的来说有三个converter，那么这三个converter在代码中具体在哪里呢？我们在ckeditor5-engine包下的controller包中有两个类，而这两个类才是真正存放转化控制器的代码的地方：这里我
CKEditor5——模型理解（四：模型组成）
'insertContent', 'deleteContent', 'modifySelection''insertContent', 'deleteContent', 'modifySelection', 'getSelectedContent', 'applyOperation'今天我们来深入学习一下CK5的模型。我们先看看model.js的源码：export default class Mo
CKEditor5——模型理解(五：Position, Range, Selection)
今天我们继续学习CK5中模型的一些知识，主要包括：Position, Range, Selection首先，我们需要知道：position表示模型树中的一个位置。模型的位置有两部分组成：root，path。即位置由其根和该根中的路径表示。位置基于偏移量，而不是索引。这意味着两个文本节点 foo 和 bar 之间的位置偏移为 3，而不是 1。由于模型中的位置由位置根和位置路径表示，因此可以创建不存在
CKEditor5——模型理解(七:Selection)
昨天我们学习了Range的一些API使用，今天我们看看另一个重要的类Selection的API:Selection的作用是记录鼠标在文档上的选择区域，如果是单个用户在编辑一份文档的时候，选择应该就是一个Range，如果是多个用户在编辑一份文档的时候,那么选择的区域就应该是多个range。因此，我大胆的猜测，Selection中应该有Range数组。我们来看看吧。Selection属性anchor
CKEditor5——模型理解(八:Operation和Batch)
上一节主要学习并理解CK5中的Selection，今天主要来分析并研究一下CK5中的两个重要的概念：Operation和Batch。同时结合代码来深入理解。Operation属性baseVersion : Number这里我的理解是操作都是用在模型的文档上，而模型文档是有不同的版本的，因此操作也要有一个版本号，如果这个版本号与模型的版本号不一致，可能会导致错误。后面理解模型文档上的时候再来说这个属
CKEditor5——Utils(工具类理解)
如果对CK5的代码有所理解的话，大概知道，CK5有一个非常重要的工具包项目，这个工具包非常重要，提供了CK5最基础的一些功能。比如：集合类Collection、事件类EmitterMixin、观察者类ObservableMixin等。今天我们暂缓学些以上的类，主要理解一个关于dom的类,那就是Position和Rect类，因为这两个类是CK5中弹出balloon工具条的基础类。我会一点点学习它的原
CKEditor5——(九:TreeWalker)
前面我们学习了模型的基础知识，今天我们来看看模型另一个特点：模型位置的迭代。也就是TeeeWalker这个类用来在模型的位置之间迭代访问模型的节点。TreeWalker属性boundaries : Range迭代器边界这个属性用于指定迭代器在文档的哪个范围内迭代访问文档的Item。当迭代器在边界的末端“向前”行走或在边界的起点“向后”行走时，返回 { done: true }。direction
CKeditor5事件系统命名空间分析
在上一节的事件系统源码中，我们留下了一个函数createEventNamespace( this, event )今天我们来分析这个函数：首先，我将这个函数摘取出来，放到一个utils.js文件中：function getEvents( source ) { if ( !source._events ) { Object.defineProperty( source, '_events',
CKEditor5事件系统源码分析(三)
CKEditor5事件系统源码分析(三)上一节我们分析了事件系统的关键类EmitterMixin的fire()方法，今天我们看看另一个方法就是delegate()这个方法的代码如下：delegate( ...events ) { return { to: ( emitter, nameOrFunction ) => { if ( !this._delegations ) {
CKEditor5——Plugin理解
CKEditor5——Plugin理解今天开始理解学习CK5的插件类，整个类是所有插件的抽象，看看源码：export default class Plugin { /** * @inheritDoc */ constructor( editor ) { this.editor = editor; this.set( 'isEnabled', true );
CKEditor5——Uitls(DomEmitterMixin类理解)
CKEditor5——Uitls(DomEmitterMixin类理解)今天开始研究在CK5的Utils包中的另一个比较重要的类，这个类就是DomEmitterMixin，我们先看看这个类的代码：const DomEmitterMixin = extend( {}, EmitterMixin, { listenTo( emitter, event, callback, options = {}
CKEditor5——UI理解
CKEditor5——UI理解今天我们开始认识CK5中的UI，首先我们还是认识一些基础类，今天开始认识的第一个类比较简单，那就是ViewCollection,首先我们看看代码：export default class ViewCollection extends Collection { constructor( initialItems = [] ) { super( initialIt
CKEditor5——Template理解(一)
CKEditor5——Template理解上一节，我们学习并大致理解了CK5的UI中最重要的一个类，那就是View，可以看出这个类其实有点像一个门面，而很多实际的功能包括render和bind等都是委托给Template这个类来实现的，因此，我们今天来靴子这个类。export default class Template { /** * Creates an instance of the
CKEditor5——Template理解(二)
CKEditor5——Template理解(二)在上一节我们分析了类Template的构造函数，今天我们继续学习其他的方法：我们先看看render()方法render() { const node = this._renderNode( { intoFragment: true } ); this._isRendered = true; return node; } // cons
CKEditor5——Node,Element,NodeList源码分析
CKEditor5——Node,Element,NodeList源码分析前面大概知道了模型的基本组成，包括一个抽象类Node,两个实现类Text和Element，以及还有一个关键的类就是NodeList。为了容易展开这个话题，我首先提出一个问题，那就是为什么是Node类是一个抽象类？先看看这个类的具体代码：export default class Node { /** * Creates a
CKEditor5——Position源码分析
CKEditor5——Position源码分析前面我们介绍过CK5模型中的一个关键类，那就是Position的使用，今天我们来看看它的源码，梳理一下方便以后理解：export default class Position { /** * Creates a position. * * @param {module:engine/model/element~Element|module
数据加载中