CKEditor5——视图添加
上一节我们介绍了在CK5中UI组件的一些基本使用，今天我们继续UI部分的学习，如何添加一个UI视图到CK5？CK5视图结构首先，我们贴上代码：EditorUIView├──"top"collection│└──ToolbarView│└──"items"collection│├──DropdownV...
CKEditor5 Observable——装饰方法
上一节我们学习了在CK5中，如何绑定多个属性以及绑定多个Observable对象，今天我们学习如何装饰方法。 首先，我们提出一个问题，为什么会有装饰方法呢？以及什么叫做装饰?所谓装饰，就是在不改变原来方法功能的前提下，增加方法的功能，众所周知在java的IO流中，就有很多地方用到了装饰。 而在CK5...
理解CKEditor5的schema
我们知道，CKEditor5是一个用MVC架构设计的富文本编辑器。如上图所示，三层分别是:Model,Controller,View首先，第一个问题是schema属于那一层？经过官方文档的初步学习，我们可以看到：editor.model.schema;//->Themodel'sschema....
CKEditor5 Observable——属性绑定
前面我们知道了，在CK5中怎么样将一个对象设置成Observable以及Observable在UI中如何使用？属性绑定今天我们来看看如何进行可观测对象的属性绑定和重命名。首先，我们假定有两个Observable对象，所谓绑定就是将一个对象的可观测状态绑定到另一个可观测对象，如下所示：constbut...
CKEditor5——模型理解（一）
我们知道，CK5实现了一个MVC的架构，从今天开始，我们一步一步深入学习模型，视图，以及模型和视图之间的转换。今天我们开始模型的学习。首先，我们看模型的定义：ThemodelisimplementedbyaDOM-liketreestructureofelementsandtextnodes.模型有...
CKEditor5 UI——UI组件
CK5提供了一个标准UI库，这个库是由@ckeditor/ckeditor5-ui实现的。我们首先需要理解的是CK5的UI组件都是用模板来构建的，因此，我们首先明白什么是模板？UI组件在CK中又称为视图，视图是模板通过渲染后得到的。视图首先，我们定义一个视图：import{View}from'cke...
CKEditor5 Observable——绑定多个对象或属性
上一节我们学习了如何绑定属性，今天我们继续学习绑定多个属性或者多个Observable对象。 绑定多个属性如何绑定多个属性，下面我们用代码来说明：constbutton=newButton();constcommand=editor.commands.get('bold');button.bind(...
CKEditor5——Conversion理解
大家知道，在CKEditor5中，Conversion（转化器）是最重要的一个组件之一，为了深入的理解转化器，我们先从大的层面来掌握一下，以后再分别从细节入手。我们从上面的图中不难看出，总的来说有三个converter，那么这三个converter在代码中具体在哪里呢？我们在ckeditor5-en...
CKEditor5——模型理解(五：Position, Range, Selection)
今天我们继续学习CK5中模型的一些知识，主要包括：Position,Range,Selection首先，我们需要知道：position表示模型树中的一个位置。模型的位置有两部分组成：root，path。即位置由其根和该根中的路径表示。位置基于偏移量，而不是索引。这意味着两个文本节点foo和bar之间...
CKEditor5——模型理解（四：模型组成）
'insertContent','deleteContent','modifySelection''insertContent','deleteContent','modifySelection','getSelectedContent','applyOperation'今天我们来深入学习一下CK5...
CKeditor5 图片上传
下面是自定义了一个适配器，之前我一直是在ClassicEditor.create(editorElement,{ckfinder:{uploadUrl:'/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=F...
CKEditor5正确添加插件的方法
CKEditor5添加插件错误ckeditor-duplicated-modules本来想在CKEditor5的ckeditor5-build-classic添加一个CodeBlock插件，按官方文档，先安装@ckeditor/ckeditor5-code-blocknpminstall--save...