9.6K Star!可扩展的富文本编辑框架!

网站建设3年前发布
26 0 0

Lexical 是一个可扩展的 JavaScript 网页文本编辑器框架,强调可靠性、可访问性和高性能,旨在提供一流的开发人员体验,轻松地制作原型并充满信心的构建功能。结合高度可扩展的架构,Lexical 允许开发人员创建在大小和功能上可扩展的独特文本编辑体验。,Lexical 可以轻松创建复杂的文本编辑体验,否则使用内置浏览器工具会非常复杂,比如可以用来构建这些:,Lexical 具有以下特点:,支持以下浏览器:,项目地址:,https://github.com/facebook/lexical,编辑器实例是将所有东西连接在一起的核心,可以将 contenteditable DOM 元素附加到编辑器实例上,注册和监听命令,更重要的是,编辑器允许更新其自身的 EditorState。,编辑器状态表示你希望在 DOM 上显示的内容的底层数据模型,包含两部分:,可以将节点转换或命令处理程序作为钩子挂到 update 方法中,它们将作为更新流程的一部分而被调用,以防止更新的级联/瀑布式更新。,如果想要更改编辑器状态中的某些内容,必须通过更新操作来完成:,传递给更新调用的闭包很重要,这是一个拥有活动中编辑器状态完整上下文的地方,它公开了对底层编辑器状态节点树的访问。,Lexical 有自己的 DOM 协调器,它采用一组编辑器状态(总是“当前”和“待定”)并在它们上应用“差异”。然后它使用此差异仅更新 DOM 中需要更改的部分,可以将其视为一种虚拟 DOM,使得 Lexical 能够跳过许多差异比较工作,因为它知道在给定更新中发生了哪些变化。,除了调用更新之外,使用 Lexical 完成的大部分工作是通过监听器、节点转换和命令完成的。这些操作都来自编辑器实例,以 register 开头。另一个重要特性是所有注册方法都返回一个函数以轻松取消订阅它们。,命令是用于将 Lexical 中的所有内容链接到一起的通信系统,当按键被触发或其他重要信号出现时,语法在内部调度命令,传入的命令按优先级通过所有处理程序进行传播,类似于浏览器的时间传播机制,这个例子可以用来创建一个简单的富文本编辑器:,

© 版权声明

相关文章