CKEditor5正确添加插件的方法
CKEditor5添加插件错误ckeditor-duplicated-modules本来想在CKEditor 5的ckeditor5-build-classic添加一个Code Block插件，按官方文档，先安装@ckeditor/ckeditor5-code-blocknpm install --save @ckeditor/ckeditor5-code-block然后再代码中引入使用：impo
ckeditor5
CKEditor 5设置编辑器高度
CKEditor 5提供的几种编辑器，它们的高度是随着内容变化的，官方没有提供设置编辑器高度的参数配置。如果要给编辑器固定高度有以下两种做法。对于经典版（classic editor build），可以通过CSS：.ck-editor__editable_inline { height: 200px;}对于所有版本，可以通过js来设置：editor.editing.view.chang
理解CKEditor5的schema
我们知道，CKEditor5是一个用MVC架构设计的富文本编辑器。如上图所示，三层分别是:Model,Controller, View首先，第一个问题是schema属于那一层？经过官方文档的初步学习，我们可以看到：editor.model.schema; // -> The model's schema.因此，我们可以得出结论：schema属于模型层：其次我们需
CKEditor5事件系统(事件优先级)
今天继续学习CK5的事件系统，上一节我们知道了绑定和取消绑定事件的两种方法，知道在一个emitter上一个同名事件可以绑定多个回调函数，自然问题来了，这些函数的执行顺序是怎么样的呢？CK5的事件监听优先级实际上，对于一个同名事件，CK5提供了事件优先级功能，如下代码所示const anyClass = new AnyClass(); anyClass.on( 'eventName', ( even
CKEditor5事件系统(代理事件)
emitter接口提供了事件代理机制。也就是说指定选择的事件能够被其他的emitter触发。 1、代理指定的事件到另一个emitterlet anyClass = new AnyClass(); let anotherClass = new AnyClass(); let oneClass = new AnyClass(); anotherClass.on('bar',(evt,data
CKEditor5事件系统(视图事件冒泡)
CK5的视图(view.document)不仅是一个Observable和emitter，而且还实现了一个BubblingEmitter,它是由BubblingEmitterMixin实现的。它提供了在虚拟dom机制上的冒泡事件。 它与普通的dom树上的冒泡机制不同。它不会在特定的元素上注册监听器，而是在指定的上下文上注册监听器。这里的上下文，要么是一个元素，要么是虚拟上下文之一，要么是
CKEditor5 Observables
在CKEditor5中除了事件系统外，还有另一个重要的系统就是可观测对象,俗称Observable对象。此对象的属性是可观测的，一段对象的属性发生改变，将会触发一个事件，监听此事件的代码片段可以做出一些相应的操作。 CK5定义一个可观测对象import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin'
CKEditor5 模板绑定
CK5还可以将模板的属性绑定到可观测对象属性，如下代码所示：import {View} from 'ckeditor5/src/ui'; export default class Button extends View { constructor(){ super(); this.type = 'button'; const bind =
CKEditor5 Observable——属性绑定
前面我们知道了，在CK5中怎么样将一个对象设置成Observable以及Observable在UI中如何使用？属性绑定今天我们来看看如何进行可观测对象的属性绑定和重命名。首先，我们假定有两个Observable对象，所谓绑定就是将一个对象的可观测状态绑定到另一个可观测对象，如下所示：const button = new Button(); const command = editor.comman
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
CKEditor5——视图添加
上一节我们介绍了在CK5中UI组件的一些基本使用，今天我们继续UI部分的学习，如何添加一个UI视图到CK5？CK5视图结构首先，我们贴上代码：EditorUIView ├── "top" collection │ └── ToolbarView │ └── "items" collection │ ├── DropdownView
CKEditor5事件系统源码分析(二)
CKEditor5事件系统源码分析(二)上一节我们分析了CK5的EmitterMixin类的重点方法addEventListener,今天我们再认真看看fire方法。fire( eventOrInfo, ...args ) { try { const eventInfo = eventOrInfo instanceof EventInfo ? eventOrInfo : new EventI
CKEditor5——Utils(Collection类理解)
CKEditor5——Utils(Collection类理解)今天我们学习CK5的Utils工具包中比较重要且常用的一个关键类:Collection，先贴出比较关键的代码：export default class Collection { constructor( initialItemsOrOptions = {}, options = {} ) { const hasInitialIt
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——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——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——Template理解(三)
CKEditor5——Template理解(三)上一节我们分析了render()方法中关键的_renderText(),我们再来看看另一个方法就是renderElement()_renderElement( data ) { let node = data.node; if ( !node ) { node = data.node = document.createElementNS(
CKEditor5——Position源码分析(二)
CKEditor5——Position源码分析(二)上一节，我们学习了Position的基础知识，包括怎么寻找它的parent属性，它的path是什么意思？今天我们看另一个方法，两个Position之间的关系是什么，也就是这个方法：compareWith( otherPosition ) → PositionRelationcompareWith( otherPosition ) { if (
CKEditor5——Position源码分析(三)
CKEditor5——Position源码分析(三)上一节我们学习了比较两个Position之间的关系，它们可能属于不同的根节点，它们可能完全相同，它们也可能存在前后关系。今天我们继续学习这个类的另一个关键方法：那就是getTransformedByOperation( operation ) → PositiongetTransformedByOperation( operation ) {
数据加载中