slate源码解读

slate官网

分析 wangeditorslate-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。

框架概念

  1. Nodes 用 Nodes格式对editor.children内容进行预定义
  2. Locations 指定在文档的哪个位置插入、删除等操作
  3. Transforms Slate的数据不能直接更改,可以通过Transforms操作对其更改
  4. Operations Operations是在调用Transforms发生的细粒度的低级操作。单个转换可能导致许多低级操作被应用到编辑器。
  5. Commands Commands是表示用户特定意图的高级操作。它们在编辑器界面上表示为辅助函数。
  6. Plugins 对Editor对象扩展
  7. Serializing 文本节点的JSON定义序列化为HTML和Markdown等常见格式。
  8. Normalizing "规范化"是指如何确保编辑器的内容始终具有特定的格式

slate源码解读

待续。。。

写在最后!!!

通过对编辑器源码的解读,我学会了很多新思想,下面总结一下

  1. 文本标签 input 和 textarea它们都不能设置丰富的样式,于是我们采用 contenteditable 属性的编辑框,常规做法是结合 document.execCommand 命令对编辑区域的元素进行设置,这就类似于我们初代的前端代码原生js/jquery,更改页面效果通过对真实dom的增删改查;而wangeditorslate-react采用了一个新的思想,这就类似我们用 react/vue等框架开发页面,通过数据驱动的思想更改页面的元素。
  2. 分析 wangeditorslate-react源码我们可以看出两者功能类似,都是将 slate->createEditor()生成的editor对象转化为vnode,然后将虚拟dom挂载在带有 contenteditable 属性的节点上;slate-react是基于react,wangeditor是通过snabbdom.js,做到了与框架无关
  3. 菜单工具的原理无非是渲染各种按钮,给按钮绑定点击事件。事件用于更改编辑器区域的内容,它主要思路就是 通过 editor的api 对其children node更改

欢迎关注我的前端自检清单,我和你一起成长

相关推荐
伍哥的传说44 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi9878381 小时前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为