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

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——模型理解(四:模型组成)

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

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

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

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
阅读更多

CKEditor5 Observable——装饰方法

上一节我们学习了在CK5中,如何绑定多个属性以及绑定多个Observable对象,今天我们学习如何装饰方法。 首先,我们提出一个问题,为什么会有装饰方法呢?以及什么叫做装饰?所谓装饰,就是在不改变原来方法功能的前提下,增加方法的功能,众所周知在java的IO流中,就有很多地方用到了装饰。 而在CK5中,装饰是什么意思呢?请看下面这段话:Decorating object met
阅读更多

CKEditor5 UI——UI组件

CK5提供了一个标准UI库,这个库是由@ckeditor/ckeditor5-ui实现的。我们首先需要理解的是CK5的UI组件都是用模板来构建的,因此,我们首先明白什么是模板?UI组件在CK中又称为视图,视图是模板通过渲染后得到的。视图首先,我们定义一个视图:import {View} from 'ckeditor5/src/ui'; export default class InputView
阅读更多

CSS三栏布局——flex

flex布局现在越来越流行,很多框架都采用flex布局。今天我们采用flex来实现三栏布局。首先父元素设置flex:display。左右分别设置flex: 0 0 200px。代码如下所示:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
阅读更多

CSS三栏布局——浮动

不使用定位,只使用浮动实现左右固定,中间宽度自适应布局实现关键:自适应部分一定要放在第一个位置,使用浮动,且宽度设置为100%,如果不设置为100%,浮动元素内容不够撑开整个宽度。左右固定部位,使用margin-left :负数,使其左右靠齐。中间自适应部分嵌套一个div,设置margin-left 和 margin-right 使其空出左右固定的宽度。代码如下:<!DOCTYPE HTML
阅读更多

CSS三栏布局——定位

这里首先让中间栏绝对定位,两边栏相对定位;这里需要注意的是,如果中间使用绝对定位,不设置宽度的话将会撑不开容器;因此,中间使用了相对定位后,同时设置margin-left和margin-right给左右两栏一定空间,然后左右两栏不管是相对定位还是绝对定位都可以,这里我们使用绝对定位:<!DOCTYPE HTML> <html lang="en-US"> <head&g
阅读更多

CSS三栏布局——双飞燕定位

这种布局方式需要对父容器设置padding,使用padding来给左右两栏空出空间如果左右两边使用绝对定位,那么方法就和上一节的方法差不多,如果使用相对定位,在结合浮动的话,方法代码如下:<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <titl
阅读更多

笔记示例

欢迎使用开发者笔记,简单用法如下:1、快速插入命令面板输入“/”,可以调出快速插入命令面板。借助命令面板,您可以快速插入标题,代码块,图片,列表等等。2、编辑器工具栏在哪里?请随便选择文本或者输入“/”试一下。3、发布点击右上角的发布按钮发布笔记。建议和问题可以发邮件到feedback@devnote.pro。期待您的参与和宝贵意见。Enjoy it!!! 
阅读更多

java.lang.IllegalArgumentException: Expected URL scheme 'http' or 'https' but no colon was found

今天在开发的过程中发现了如下错误:java.lang.IllegalArgumentException: Expected URL scheme 'http' or 'https' but no colon was found at okhttp3.HttpUrl$Builder.parse(HttpUrl.java:1332) ~[okhttp-3.14.9.jar:?] at okhttp3.
阅读更多
X

欢迎加群学习交流

联系我们