理解CKEditor5的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,这里说说常用的属性

  1. allowIn : String | Array<String> 定义的模型节点可以作为哪些模型节点的子节点。白话来说就是可以放在哪些节点下面。
     
  2. allowWhere :  String | Array<String> 定义的模型节点从目标模型节点继承allowIn属性。通俗解释就是目标模型节点可以放置的位置,我们定义的模型节点就可以放置。
     
  3. allowAttributes : String | Array<String> 定义的模型节点允许包含哪些属性。通俗理解就是模型节点允许哪些属性。
     
  4. allowAttributesOf: String | Array<String> 定义的模型节点从目标模型节点继承allowAttributes属性。 通俗解释就是目标模型节点允许哪些属性,我们定义的模型节点就允许哪些属性。
     
  5. allowChildren: String | Array<String> 定义的模型节点可以包含哪些模型子节点。通俗理解就是模节点内部可以放置哪些模型子节点。
     
  6. allowContentOf : String | Array<String> 定义的模型节点从目标模型节点继承allowChildren属性。通俗理解就是目标模型节点可以包含哪些子模型节点,我们定义的模型节点就可以包含那些子模型节点。
     
  7. isLimit :  设置为 true 时,元素内的所有操作只会修改内容,不会影响元素本身。也就是说该元素无法使用回车键拆分,无法在元素内部使用删除键删除该元素(如果把整个 Molde 理解为一张网页,Limit Element 就相当于 iframe);
     
  8. isObject :  是否为一个完整对象(完整对象会被整体选中,无法使用回车拆分,无法直接编辑文本);
     
  9. isBlock : 是否为块元素,类似 HTML 中的块元素;
     
  10. 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的作用就是:

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

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

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

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

相关推荐

CKEditor5事件系统(代理事件)

emitter接口提供了事件代理机制。也就是说指定选择的事件能够被其他的emitter触发。 1、代理指定的事件到另一个emitterlet anyClass = new AnyClass(); let anotherClass = new AnyClass(); let oneClass = new AnyClass(); anotherClass.on('bar',(evt,data

CKEditor5正确添加插件的方法

CKEditor5添加插件错误ckeditor-duplicated-modules本来想在CKEditor 5的ckeditor5-build-classic添加一个Code Block插件,按官方文档,先安装@ckeditor/ckeditor5-code-blocknpm install --save @ckeditor/ckeditor5-code-block然后再代码中引入使用:impo

理解RxJava里Observables的相关类型

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

理解React Native的Props和State

Props和State是React Native分别用来控制组件中两种不同类型的数据。Propsprops是Properties的简写,称为属性。props的特点是在组件内它是不可变,或者说不能被修改。在React数据流是单向的,从父组件到子组件的方向传递。props就是组件从父组件接收的数据,在组件内部是不能对它修改。props不可变的特性是有助于我们写可复用的组件。我们只需要对一个组

理解Java的数字溢出

Java各个数字类型所占的存储空间:整型byte:1字节,1*8bit,取值范围-128~127short:2字节,2*8bit,取值范围-32768~32767int:4字节,4*8bit,取值范围-2147483648~2147483647long:8字节,8*8bit,取值访问-2^64~2^64-1浮点型float:4字节,4*8bitdouble:8字节,8*8bitchar类型java

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

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