理解CKEditor 5的schema

我们知道，CKEditor5是一个用MVC架构设计的富文本编辑器。

如上图所示，三层分别是:Model, Controller, View

首先，第一个问题是schema属于那一层？

经过官方文档的初步学习，我们可以看到：

editor.model.schema;                // -> The model's schema.

因此，我们可以得出结论：schema属于模型层：

其次我们需要理解的是schema的作用是什么？

Where a node is allowed or disallowed (e.g. paragraph is allowed in $root, but not in heading1).
What attributes are allowed for a certain node (e.g. image can have the src and alt attributes).
Additional semantics of model nodes (e.g. image is of the “object” type and paragraph of the “block” type).

官网上是这样介绍的，我自己的理解就是：

模型节点可放位置或不可放置位置。比如模型元素paragraph可放置$root下，却不可放置heading1下。
指定模型节点允许属性和禁止属性。比如模型元素image允许属性src和alt,禁止其他属性。
模型节点附加语意。比如模型节点image是一个对象类型（整体对待）而p是一个块类型（可包含元素，且元素可以分割）。

再次我们思考一下schema的信息有啥作用：

What happens with the pasted content and what is filtered out (note: in case of pasting the other important mechanism is the conversion. HTML elements and attributes which are not upcasted by any of the registered converters are filtered out before they even become model nodes, so the schema is not applied to them; the conversion will be covered later in this guide).
To which elements the heading feature can be applied (which blocks can be turned to headings and which elements are blocks in the first place).
Which elements can be wrapped with a block quote.
Whether the bold button is enabled when the selection is in a heading (and whether the text in this heading can be bolded).
Where the selection can be placed (which is — only in text nodes and on object elements).
etc.

最后，我们需要理解的是schema的定义包括哪些具体内容:

这里可以参考：SchemaItemDefinition，这里说说常用的属性

allowIn : String | Array<String> 定义的模型节点可以作为哪些模型节点的子节点。白话来说就是可以放在哪些节点下面。
allowWhere : String | Array<String> 定义的模型节点从目标模型节点继承allowIn属性。通俗解释就是目标模型节点可以放置的位置，我们定义的模型节点就可以放置。
allowAttributes : String | Array<String> 定义的模型节点允许包含哪些属性。通俗理解就是模型节点允许哪些属性。
allowAttributesOf: String | Array<String> 定义的模型节点从目标模型节点继承allowAttributes属性。通俗解释就是目标模型节点允许哪些属性，我们定义的模型节点就允许哪些属性。
allowChildren: String | Array<String> 定义的模型节点可以包含哪些模型子节点。通俗理解就是模节点内部可以放置哪些模型子节点。
allowContentOf : String | Array<String> 定义的模型节点从目标模型节点继承allowChildren属性。通俗理解就是目标模型节点可以包含哪些子模型节点，我们定义的模型节点就可以包含那些子模型节点。
isLimit : 设置为 true 时，元素内的所有操作只会修改内容，不会影响元素本身。也就是说该元素无法使用回车键拆分，无法在元素内部使用删除键删除该元素（如果把整个 Molde 理解为一张网页，Limit Element 就相当于 iframe）；
isObject : 是否为一个完整对象（完整对象会被整体选中，无法使用回车拆分，无法直接编辑文本）;
isBlock : 是否为块元素，类似 HTML 中的块元素；
isInline : 是否为行内元素。但对于 <a> <strong> 这些需要即时编辑的行内标签，在编辑器中以文本属性来区分，所以 isInline 只用于独立的元素，即 isObject 应设置为 true;

schema.register( 'newCodeBlock', {
         allowWhere: '$block',
         allowChildren: '$text',
         isBlock: true,
         allowAttributes: [ 'language' ]
 } );

用上面的代码作为例子，我们可以得出，schema：newCodeBlock可以放置在任何$block可以放置的地方，因为它继承了$block,newCodeBlock里面只能放置文本，而且是一个块元素，允许有属性language

总结

model的schema的作用就是：

定义允许的模型结构：——模型元素如何嵌套

定义允许的属性：——元素和文本节点可能允许和不允许的属性

其他特征：——内联还是块，对外部行为的原子性反应等。