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