我们知道,CK5实现了一个MVC的架构,从今天开始,我们一步一步深入学习模型,视图,以及模型和视图之间的转换。今天我们开始模型的学习。
首先,我们看模型的定义:
The model is implemented by a DOM-like tree structure of elements and text nodes.
模型有两类元素构成,分别是元素和文本节点,它是一种类似Dom树结构。我们知道,在Dom中元素可以包含属性,文本是不能包含属性的。但是在CK5中,不仅元素节点可以包含属性,文本节点也可以包含属性。
获取模型的方法
editor.model
有了模型,我们需要知道
模型存在于什么地方,以及模型如何操作?
模型存在于一个文档中,这个文档包含一个根元素,具体代码如下:
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.
注意,模型还有一个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
我们后续的操作都是以这个文档为准,然后参考一些具体的案例来进行学习。