分析
wangeditor
和slate-react
源码我们可以看出两者功能类似,都是将slate->createEditor()
生成的editor对象转化为vnode,然后挂载在带有contenteditable
属性的节点上。下面我们发掘一下slate
框架的魅力吧
createEditor
该方法是创建了一个editor对象,结构如下:
ts
interface Editor {
// Current editor state
children: Node[]
selection: Range | null
operations: Operation[]
marks: Omit<Text, 'text'> | null
// Schema-specific node behaviors.
isInline: (element: Element) => boolean
isVoid: (element: Element) => boolean
markableVoid: (element: Element) => boolean
normalizeNode: (entry: NodeEntry) => void
onChange: (options?: { operation?: Operation }) => void
// Overrideable core actions.
addMark: (key: string, value: any) => void
apply: (operation: Operation) => void
deleteBackward: (unit: 'character' | 'word' | 'line' | 'block') => void
deleteForward: (unit: 'character' | 'word' | 'line' | 'block') => void
deleteFragment: () => void
insertBreak: () => void
insertSoftBreak: () => void
insertFragment: (fragment: Node[]) => void
insertNode: (node: Node) => void
insertText: (text: string) => void
removeMark: (key: string) => void
}
- children属性包含构成编辑器内容的节点的文档树。
- selection属性包含用户的当前选择(如果有的话)。不要直接设置;使用变换。选择
- operations属性包含自上次刷新"更改"以来应用的所有操作。(由于Slate将操作批处理到事件循环的刻度中。)
- marks属性存储编辑器插入文本时要应用的格式。如果标记为null,则格式将取自当前所选内容。不要直接设置;使用Editor.addMark和Editor.removeMark。
框架概念
- Nodes 用 Nodes格式对editor.children内容进行预定义
- Locations 指定在文档的哪个位置插入、删除等操作
- Transforms Slate的数据不能直接更改,可以通过Transforms操作对其更改
- Operations Operations是在调用Transforms发生的细粒度的低级操作。单个转换可能导致许多低级操作被应用到编辑器。
- Commands Commands是表示用户特定意图的高级操作。它们在编辑器界面上表示为辅助函数。
- Plugins 对Editor对象扩展
- Serializing 文本节点的JSON定义序列化为HTML和Markdown等常见格式。
- Normalizing "规范化"是指如何确保编辑器的内容始终具有特定的格式
slate源码解读
待续。。。
写在最后!!!
通过对编辑器源码的解读,我学会了很多新思想,下面总结一下
- 文本标签
input 和 textarea
它们都不能设置丰富的样式,于是我们采用contenteditable
属性的编辑框,常规做法是结合document.execCommand
命令对编辑区域的元素进行设置,这就类似于我们初代的前端代码原生js/jquery,更改页面效果通过对真实dom的增删改查;而wangeditor
和slate-react
采用了一个新的思想,这就类似我们用 react/vue等框架开发页面,通过数据驱动的思想更改页面的元素。 - 分析
wangeditor
和slate-react
源码我们可以看出两者功能类似,都是将slate->createEditor()
生成的editor对象转化为vnode,然后将虚拟dom挂载在带有contenteditable
属性的节点上;slate-react
是基于react,wangeditor
是通过snabbdom.js
,做到了与框架无关 - 菜单工具的原理无非是渲染各种按钮,给按钮绑定点击事件。事件用于更改编辑器区域的内容,它主要思路就是 通过
editor的api
对其children node更改
欢迎关注我的前端自检清单,我和你一起成长