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

CKEditor5——Position源码分析(三)

CKEditor5——Position源码分析(三)上一节我们学习了比较两个Position之间的关系,它们可能属于不同的根节点,它们可能完全相同,它们也可能存在前后关系。今天我们继续学习这个类的另一个关键方法:那就是getTransformedByOperation( operation ) → PositiongetTransformedByOperation( operation ) {
阅读更多

CKEditor5——Position源码分析(二)

CKEditor5——Position源码分析(二)上一节,我们学习了Position的基础知识,包括怎么寻找它的parent属性,它的path是什么意思?今天我们看另一个方法,两个Position之间的关系是什么,也就是这个方法:compareWith( otherPosition ) → PositionRelationcompareWith( otherPosition ) { if (
阅读更多

CKEditor5——Position源码分析

CKEditor5——Position源码分析前面我们介绍过CK5模型中的一个关键类,那就是Position的使用,今天我们来看看它的源码,梳理一下方便以后理解:export default class Position { /** * Creates a position. * * @param {module:engine/model/element~Element|module
阅读更多

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

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

CKEditor5——Node,Element,NodeList源码分析

CKEditor5——Node,Element,NodeList源码分析前面大概知道了模型的基本组成,包括一个抽象类Node,两个实现类Text和Element,以及还有一个关键的类就是NodeList。为了容易展开这个话题,我首先提出一个问题,那就是为什么是Node类是一个抽象类?先看看这个类的具体代码:export default class Node { /** * Creates a
阅读更多

CKEditor5——模型理解(四:模型组成)

'insertContent', 'deleteContent', 'modifySelection''insertContent', 'deleteContent', 'modifySelection', 'getSelectedContent', 'applyOperation'今天我们来深入学习一下CK5的模型。我们先看看model.js的源码:export default class Mo
阅读更多

CKEditor5——Template理解(三)

CKEditor5——Template理解(三)上一节我们分析了render()方法中关键的_renderText(),我们再来看看另一个方法就是renderElement()_renderElement( data ) { let node = data.node; if ( !node ) { node = data.node = document.createElementNS(
阅读更多

CKEditor5——Template理解(二)

CKEditor5——Template理解(二)在上一节我们分析了类Template的构造函数,今天我们继续学习其他的方法:我们先看看render()方法render() { const node = this._renderNode( { intoFragment: true } ); this._isRendered = true; return node; } // cons
阅读更多

CKEditor5——Template理解(一)

CKEditor5——Template理解上一节,我们学习并大致理解了CK5的UI中最重要的一个类,那就是View,可以看出这个类其实有点像一个门面,而很多实际的功能包括render和bind等都是委托给Template这个类来实现的,因此,我们今天来靴子这个类。export default class Template { /** * Creates an instance of the
阅读更多

CKEditor5——View理解

CKEditor5——View理解今天我们继续学习ck5UI中的一个基础类View,这个类是所有视图的基础类,我们先看看这个类的代码:export default class View { /** * Creates an instance of the {@link module:ui/view~View} class. * * Also see {@link #render}.
阅读更多

CKEditor5——UI理解

CKEditor5——UI理解今天我们开始认识CK5中的UI,首先我们还是认识一些基础类,今天开始认识的第一个类比较简单,那就是ViewCollection,首先我们看看代码:export default class ViewCollection extends Collection { constructor( initialItems = [] ) { super( initialIt
阅读更多

CKEditor5——Uitls(DomEmitterMixin类理解)

CKEditor5——Uitls(DomEmitterMixin类理解)今天开始研究在CK5的Utils包中的另一个比较重要的类,这个类就是DomEmitterMixin,我们先看看这个类的代码:const DomEmitterMixin = extend( {}, EmitterMixin, { listenTo( emitter, event, callback, options = {}
阅读更多

CKEditor5——Utils(Collection类理解)

CKEditor5——Utils(Collection类理解)今天我们学习CK5的Utils工具包中比较重要且常用的一个关键类:Collection,先贴出比较关键的代码:export default class Collection { constructor( initialItemsOrOptions = {}, options = {} ) { const hasInitialIt
阅读更多

CKEditor5——Plugin理解

CKEditor5——Plugin理解今天开始理解学习CK5的插件类,整个类是所有插件的抽象,看看源码:export default class Plugin { /** * @inheritDoc */ constructor( editor ) { this.editor = editor; this.set( 'isEnabled', true );
阅读更多

CKEditor5事件系统源码分析(三)

CKEditor5事件系统源码分析(三)上一节我们分析了事件系统的关键类EmitterMixin的fire()方法,今天我们看看另一个方法就是delegate()这个方法的代码如下:delegate( ...events ) { return { to: ( emitter, nameOrFunction ) => { if ( !this._delegations ) {
阅读更多

CKEditor5事件系统源码分析(一)

在学习CK5的时候,在事件系统这一块,有一个特别关键的类,那就是EmitterMixin这个类,这个类在什么地方呢?他其实就在ckeditor5-utils包中。下面我们来看看这个类:  EmitterMixin类const EmitterMixin = { /** * @inheritDoc */ on( event, callback, options = {} ) {
阅读更多

CKEditor5事件系统源码分析(二)

CKEditor5事件系统源码分析(二)上一节我们分析了CK5的EmitterMixin类的重点方法addEventListener,今天我们再认真看看fire方法。fire( eventOrInfo, ...args ) { try { const eventInfo = eventOrInfo instanceof EventInfo ? eventOrInfo : new EventI
阅读更多

CKEditor5事件系统(基础使用)

最近在学习CK5,一种最大的感受就是CK5的架构不是很大,但是内容特别多。笔者在学习中,总结出一个浅显的道理,那就是掌握基础知识,对框架宏观把握,学习起来会事半功倍。今天开始初步研究一下CK5的事件系统:在CK5的事件系统中,关键的一个对象被称作Emitter(发射器),Emitter是一个可以发送事件的对象。如何创建一个Emitter,下面的代码创建了一个混合了事件发送的AnyClass类,它实
阅读更多

CKEditor5——Conversion理解

大家知道,在CKEditor5中,Conversion(转化器)是最重要的一个组件之一,为了深入的理解转化器,我们先从大的层面来掌握一下,以后再分别从细节入手。我们从上面的图中不难看出,总的来说有三个converter,那么这三个converter在代码中具体在哪里呢?我们在ckeditor5-engine包下的controller包中有两个类,而这两个类才是真正存放转化控制器的代码的地方:这里我
阅读更多

CKEditor5——Utils(工具类理解)

如果对CK5的代码有所理解的话,大概知道,CK5有一个非常重要的工具包项目,这个工具包非常重要,提供了CK5最基础的一些功能。比如:集合类Collection、事件类EmitterMixin、观察者类ObservableMixin等。今天我们暂缓学些以上的类,主要理解一个关于dom的类,那就是Position和Rect类,因为这两个类是CK5中弹出balloon工具条的基础类。我会一点点学习它的原
阅读更多

getClientRects应用举例

上一节我们介绍了getClients的用法,今天我们学习一个简答的应用场景需求:我在一篇文章中选中一段文字,然后在文字的下方弹出一个简单的浮动按钮。思路分析:1、按钮需要浮动,首先我想到的是在文档中使用一个元素来作为按钮,这个元素我采用绝对定位,当我知道选择区域的大概位置的时候,根据位置修改元素的top和left值,就可以啦。2、按钮元素最好首先将top和left的位置放置于文档的视口外部,这个我
阅读更多

CKeditor5事件系统命名空间分析

在上一节的事件系统源码中,我们留下了一个函数createEventNamespace( this, event )今天我们来分析这个函数:首先,我将这个函数摘取出来,放到一个utils.js文件中:function getEvents( source ) { if ( !source._events ) { Object.defineProperty( source, '_events',
阅读更多

CKEditor5 Observable——属性绑定

前面我们知道了,在CK5中怎么样将一个对象设置成Observable以及Observable在UI中如何使用?属性绑定今天我们来看看如何进行可观测对象的属性绑定和重命名。首先,我们假定有两个Observable对象,所谓绑定就是将一个对象的可观测状态绑定到另一个可观测对象,如下所示:const button = new Button(); const command = editor.comman
阅读更多

CKEditor5 模板绑定

CK5还可以将模板的属性绑定到可观测对象属性,如下代码所示:import {View} from 'ckeditor5/src/ui'; export default class Button extends View { constructor(){ super(); this.type = 'button'; const bind =
阅读更多

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

CK5的视图(view.document)不仅是一个Observable和emitter,而且还实现了一个BubblingEmitter,它是由BubblingEmitterMixin实现的。它提供了在虚拟dom机制上的冒泡事件。 它与普通的dom树上的冒泡机制不同。它不会在特定的元素上注册监听器,而是在指定的上下文上注册监听器。这里的上下文,要么是一个元素,要么是虚拟上下文之一,要么是
阅读更多

CKEditor5事件系统(代理事件)

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

CKEditor5 Observables

在CKEditor5中除了事件系统外,还有另一个重要的系统就是可观测对象,俗称Observable对象。此对象的属性是可观测的,一段对象的属性发生改变,将会触发一个事件,监听此事件的代码片段可以做出一些相应的操作。 CK5定义一个可观测对象import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin'
阅读更多

CKEditor5——(九:TreeWalker)

前面我们学习了模型的基础知识,今天我们来看看模型另一个特点:模型位置的迭代。也就是TeeeWalker这个类用来在模型的位置之间迭代访问模型的节点。TreeWalker属性boundaries : Range迭代器边界这个属性用于指定迭代器在文档的哪个范围内迭代访问文档的Item。当迭代器在边界的末端“向前”行走或在边界的起点“向后”行走时,返回 { done: true }。direction
阅读更多

getClientRects(学习)

Element 接口的 getClientRects() 方法返回 DOMRect 对象的集合,这些对象指示客户端中每个 CSS 边框框的边界矩形。大多数元素每个只有一个边框,但多行内联元素(例如多行 <span> 元素,默认情况下)在每一行周围都有一个边框。调用语法:let rectCollection = object.getClientRects();返回值是 DOMRect 对
阅读更多

getBoundingClientRect(学习)

最近在学习CK5的时候,学习到了一个Rect的类,这个类主要提供盒子元素定位时候用到的一些值,比如top、left、right、bottom、width、height。而它的实现主要用到了两个方法,其中一个就是:Element.getBoundingClientRect()Element.getBoundingClientRect() 方法返回一个 DOMRect 对象,该对象提供有关元素大小及其
阅读更多

CKEditor5——模型理解(一)

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

CKEditor5——模型理解(八:Operation和Batch)

上一节主要学习并理解CK5中的Selection,今天主要来分析并研究一下CK5中的两个重要的概念:Operation和Batch。同时结合代码来深入理解。Operation属性baseVersion : Number这里我的理解是操作都是用在模型的文档上,而模型文档是有不同的版本的,因此操作也要有一个版本号,如果这个版本号与模型的版本号不一致,可能会导致错误。后面理解模型文档上的时候再来说这个属
阅读更多

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

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

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

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

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

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

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

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

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

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

formControlName must be used with a parent formGroup directive. You'll want to add a formGroup

异常情况描述Angular模板出现异常情况,如下所示:异常分析大概的意思就是formControlName没有在formGroup里面,所以猜测应该是模板位置不正确。代码查看<form class="signin-container" [formGroup]="signinForm" #formDir="ngForm" (ngSubmit)="onSubmit()"> <
阅读更多

CKEditor5——视图添加

上一节我们介绍了在CK5中UI组件的一些基本使用,今天我们继续UI部分的学习,如何添加一个UI视图到CK5?CK5视图结构首先,我们贴上代码:EditorUIView ├── "top" collection │ └── ToolbarView │ └── "items" collection │ ├── DropdownView
阅读更多

CKEditor5 Observable——绑定多个对象或属性

上一节我们学习了如何绑定属性,今天我们继续学习绑定多个属性或者多个Observable对象。 绑定多个属性如何绑定多个属性,下面我们用代码来说明:const button = new Button(); const command = editor.commands.get( 'bold' ); button.bind( 'isOn', 'isEnabled' ).to( command
阅读更多
X

欢迎加群学习交流

联系我们