格式化规则
什么是格式化规则?
格式化规则是一组函数,类型为 RuleFunctionType
,每个函数提供唯一入参,入参包含两个属性 editor
和 node
,分别表示当前编辑器的实例和当前需要进行格式化的节点。
什么时候会进行格式化?
- 当我们构建一个编辑器时,会进行第一次格式化,此时会针对编辑器的
stackNodes
里的所有节点,执行每一个格式化函数,保证最终渲染编辑器视图时,所有的节点都是符合规范的
当编辑器的内容特别多的时候,第一次渲染编辑器就会出现较慢的情况,这时候需要考虑去做足够友好的 UI 交互来解决
- 当我们每次调用
updateView
进行编辑器的视图更新时,编辑器内部会通过diff
算法计算出更新的节点,再对这些节点进行格式化,此时也会执行每一个格式化函数
编辑器内置的默认格式化函数
规则 1
如果节点自身是块节点,并且 tag
的值是 address
article
aside
nav
section
,此时该节点会转为默认的块节点标签
规则 2
如果节点的子节点数组中含有块节点,则该子节点会被转为块节点,同时该节点的其他非块级子节点也会被转为块节点
规则 3
如果节点是不可编辑的,则查找使其不可编辑的目标节点,针对该目标节点,如果是非块节点,则在两侧加上零宽度空白文本节点,且保证光标始终不在不可编辑的节点内部
规则 4
如果节点的子节点中存在占位符也存在其他的非空节点,则会删除占位符;如果节点的子节点中只存在占位符则将多个占位符合并为一个
规则 5
- 统一将文本节点内的
\r\n
换成\n
,解决Windows
兼容问题
- 统一将文本节点内的
- 统一将文本节点内的
(\u00A0
)换成普通空格
- 统一将文本节点内的
- 统一将文本节点内的零宽度空格换成零宽度空格(
\uFEFF -> \u200B
)
- 统一将文本节点内的零宽度空格换成零宽度空格(
- 统一将文本节点内的
\n
后面加上零宽度空白字符
- 统一将文本节点内的
规则 6
如果节点是文本节点且文本节点内容包含多个连续的零宽度空白字符,则会将文本节点内连续的零宽度空白字符合并
规则 7
如果节点的子节点中存在可以合并的兄弟节点,则会将节点进行合并(文本节点的 styles
和 marks
完全一致则可以合并;行内节点的 tag
、styles
和 marks
完全一致则可以合并)
规则 8
如果节点的子节点只有一个,如果符合合并条件,则会将节点与子节点进行合并(父节点只有一个文本节点作为子节点,且父节点是行内节点、tag
值为默认文本标签值 editor.textRenderTag
,则可以合并;父节点是块节点或者行内节点,且与唯一子节点的 tag
一致、type
一致,则可以进行合并)
编辑器的每一个内置扩展都可能会新增额外的格式化规则,所以 kaitify 的内置规则远远不止这些,以上仅仅是编辑器自身内置的规则
自定义新的规则
如果你想要添加新的规则,可以在创建编辑器时配置属性 formatRules
const editor = await Editor.configure({
value: '<p><br/></p>',
formatRules: [
//给每一个块节点设置背景色红色
({ node }) => {
if (node.isBlock()) {
if (node.hasStyles()) {
node.styles.background = 'red'
} else {
node.styles = {
background: 'red'
}
}
}
}
]
})
除了通过 formatRules
属性来配置自定义的格式化规则,还可以通过自定义扩展的方式,来配置扩展的格式化规则,以达到我们的目的,这里暂且不提,具体可以参阅 如何自己创建一个扩展?