CKEditor5——模型理解(一)

选中文字可对指定文章内容进行评论啦,绿色背景文字可以点击查看评论额。

我们知道,CK5实现了一个MVC的架构,从今天开始,我们一步一步深入学习模型,视图,以及模型和视图之间的转换。今天我们开始模型的学习。

首先,我们看模型的定义:

The model is implemented by a DOM-like tree structure of elements and text nodes.

模型由两类节点构成,分别是元素节点文本节点,模型是一种类Dom树结构。我们知道,在DOM中元素节点可以包含属性,文本节点不能包含属性。但是在CK5中,不仅元素节点可以包含属性,文本节点也可以包含属性。

获取模型的方法

editor.model

有了模型,我们需要知道

模型在什么地方,以及模型如何操作?

模型存在编辑器editor的属性,模型也包含一个模型文档,这个文档包含一个根元素,具体代码如下:

editor.model.document;              // -> The document.
editor.model.document.getRoot();    // -> The document's root.

这里需要解释的一点就是:模型的根元素可能存在多个。

留个悬念,为什么可能存在多个根元素呢?

模型文档还包含一个选择属性,这里的选择就是你选中了模型的哪些节点。同时还包含一个对模型操作的历史记录,这个历史记录放置在模型对应的文档对象上。

editor.model.document.selection;    // -> The document's selection.
editor.model.schema;                // -> The model's schema.
editor.model.document.history;      // -> 模型历史操作记录

注意,模型还有一个schema属性,这个属性我们后续会专门分析,现在只需要知道就可以啦。一般我们要操作模型一定是在某个根元素下进行操作。我们的重点是掌握模型操作的方法。

模型操作有哪些操作类别呢?

这里我们指出四类:

1、文档结构的改变

2、文档选择的改变

3、文档元素的创建,修改,删除

4、文档元素属性的添加,修改,删除

如果读者认为还有其他的话,欢迎添加评论。

操作模型

模型的操作需要使用一个类:model writer,具体用法如下:

editor.model.change( writer => {
    writer.insertText( 'foo', editor.model.document.selection.getFirstPosition() );
} );

在文档选择的位置(这里一般是光标的位置,也有特殊情况)插入一个文本节点。

下面我们尝试一些操作模型的方法

1、创建段落并插入文本节点

//在根节点插入一个paragraph

//获取文档的根元素
const root = this.editor.model.document.getRoot();
//创建一个带属性的paragraph元素
const newParagraph = writer.createElement( 'paragraph', { alignment: 'center' } );
//添加带属性的文本到paragraph元素
writer.appendText('我的测试文档添加', { bold: true } ,newParagraph);
//将段落添加到跟节点
writer.append(newParagraph,root);

如上图所示,最后红框部分就是我创建的模型

注意,在这里我们还可以在光标插入的地方操作节点,代码如下:


const newParagraph = writer.createElement( 'paragraph', { alignment: 'center' } );
writer.appendText('我的测试文档添加', { bold: true } ,newParagraph);
writer.insert(newParagraph, selection.getFirstPosition() )

这里粘贴一下模型操作的相关API文档

https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_model_writer-Writer.html

我们后续的操作都是以这个文档为准,然后参考一些具体的案例来进行学习。

总结

1、模型文档和DOM文档有什么区别和联系?(都是树结构,模型节点都可以有属性,DOM文本节点没有属性)

2、模型的操作有几类,分别是什么?

3、如何操作模型?(一定使用model writer)

版权声明:著作权归作者所有。

要慢慢静下心来一步一步学习,不断深化。优化自己。
相关推荐

TypeScript:基本类型详解

布尔值(Boolean)TypeScript的布尔值和JavaScript一样有两个值:true和false。类型标识:boolean示例:let isDone: boolean = false; 数字(Number)和JavaScript一样,TypeScript的所有数字都是用浮点数表示,支持二进制,八进制,十进制以及十六进制的表示方式,类型标识:num

理解Java 9的open module(公开模块)

模块化是Java 9新增的一个很重要且影响代码结构的特性。分类根据外部代码在编译时和运行时对模块的访问权限不同分为:常规模块(normal module)和公开模块(open module)。编译时访问比较容易理解,即代码能否显式直接使用模块里的类型,没有权限访问,编译时报错。在运行时访问模块代码是指使用Java里的Core Reflection 

[译]Java 9:一步步迁移项目到Jigsaw(模块化)

Java 9出来了。 我们来试试一个简单的Spring项目。 为了使练习更具挑战性,我们还要尝试使用新的模块系统。 该项目只是一个使用Spring,JDBC和Shedlock的简单示例。1、阅读所有可用的文档和规格说明。 嗯,听起来很无聊。 跳过第一步。2、下载JDK并尝试运行该项目。 我们很幸运,我们所有的依赖只使用公共Jav

[译]代码优先的Java 9模块系统教程(一)

Java平台模块系统(JPMS)将模块化带入Java和JVM,并改变了我们在大型应用中的编程方式。 为了充分利用它,我们需要很好地了解,第一步是学习基础知识。 在本教程中,我首先向你展示一个简单的Hello World示例,然后我们用Java 9将一个现有的demo程序模块化。我们将创建模块声明(module-info。java),使用模块路径来编译,打包,

理解RxJava里Observables的相关类型

Observable — Operator — ObserverObservable,可观察者,它就好像扬声器一样,做一些处理后发射出一些值。Operator,操作符,它就像翻译员那样将数据从一种形式翻译/修改为另一种形式。Observer,观察者,它获得那些由可观察者发射出来的或者有操作符转译的值。它们的关系如图: RxJava可观察类型在RxJava的可观察类型如下

理解CKEditor5的schema

我们知道,CKEditor5是一个用MVC架构设计的富文本编辑器。如上图所示,三层分别是:Model,Controller, View首先,第一个问题是schema属于那一层?经过官方文档的初步学习,我们可以看到:editor.model.schema; // -> The model's schema.因此,我们可以得出结论:schema属于模型层:其次我们需

初步理解RxJs

         学习是一个由浅入深的过程,如果能够理解并掌握二八原则(帕累托法则),那么我们对知识的学习定会事半功倍,甚至事半多倍。对基础知识的理解决定了对知识理解的深度。RxJs定义        RxJS是ReactiveX在JavaScript上的一个派生。ReactiveX是一个应用比较广泛的响应式

RxJs——subject理解一

什么是subject首先我们来理解什么是subject,按照官方的定义:A Subject is a special type of Observable that allows values to be multicasted to many Observers.Subjects are like EventEmitters.从定义我们看出subject就是一种允许发送值到多个观察者的特殊类型的

RxJs——错误处理(一)

错误处理是RxJs中重要组成部分,我们在响应式编程中几乎都要使用到;然而RxJs中的错误处理不像在其他库中的错误处理那么容易理解。小窍门就是关注Observable的约定,这样就容易理解RxJs中错误处理。 今天我们介绍一些常见的错误处理策略,涵盖一些常用场景,当然还是从Observable的基础知识——Observable的约定。Observable约定首先我们需要理解的是给定的流只能

RxJs——Subject理解二

上一节我们对subject有了初步理解,今天我们继续学习subjectReplaySubject介绍这个ReplaySubject之前,我们说下一种使用场景1、我们创建一个subject2、在应用的某个地方,我们向subject推送值,但此时没有订阅3、在某个时点,有第一个观察者开始订阅4、我们期望观察者能接收之前主题推送的值(可能是全部值或者时其中一个)5、实际上啥都没发生,因为主题不能存储记忆

javascript——generator理解

最近在学习CK5的时候,遇到了一个函数:function* _getAllUpcastDefinitions( definition ) { if ( definition.model.values ) { for ( const value of definition.model.values ) { const model = { key: definition.model.key