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）