简介Lexical是一个可扩展的JavaScript网络文本编辑器框架，强调可靠性、可访问性和高性能，旨在提供一流的开发人员体验，轻松地制作原型并自信地构建功能。结合高度可扩展的架构，Lexical允许开发人员创建独特的文本编辑体验，这些体验在大小和功能上都是可扩展的。Lexical可以轻松创建复杂的文本编辑体验，否则使用内置浏览器工具会非常复杂，例如可以用来构建这些：简单的纯文本编辑器textarea比标签有更多的要求，例如定义表情符号、链接,themes一个更复杂的富文本编辑器，带有标签等，用于在博客、社交媒体、消息传递应用程序上发布内容具有以下特点：可靠性。词法由附加到单个内容可编辑元素的每个编辑器实例组成，一组编辑器状态表示编辑器在任何给定时间的当前和未决状态。可访问性。Lexical遵循WCAG中建立的最佳实践，并且可以高效地使用屏幕阅读器和其他辅助技术。它不直接专注于UI组件、工具栏或富文本功能和markdown，这些功能的逻辑可以说是通过插件接口包含的）iPadOS13+（Safari）AndroidChrome72+项目地址：https://github。com/facebook/lexical几个重要的概念编辑器实例编辑器实例是连接一切的核心，contenteditableDOM元素附加在编辑器实例上，注册和监听命令，更重要的是，编辑器允许更新自己的EditorState。//创建一个编辑器实例createEditor()editorstateeditorstate代表了你要在DOM上显示的内容的底层数据模型，包括两部分：LexicalnodetreeLexicalselectorobject。编辑器状态一旦创建就不可变，可以使用以下方法创建：editor.update(()=>{...})防止更新的级联/瀑布更新的过程。//获取当前编辑器状态editor.getEditorState()//编辑器状态可以序列化成JSON，通过该方法可以将JSON转换回实例对象editor.parseEditorState()Editorupdate如果想换一个编辑器状态中的特定值这必须通过更新操作完成：editor.update(()=>{...})传递给更新调用的闭包很重要，这是具有完整上下文的地方活动中编辑器的状态，它公开提供对底层编辑器状态节点树的访问。DOM协调器Lexical有它自己的DOM协调器，它接受一组编辑器状态（总是“当前”和“待定”）并对它们应用“差异”。然后它使用这个差异来仅更新DOM中需要更改的部分，这可以被认为是一种虚拟DOM，使Lexical能够跳过很多差异工作，因为它知道在给定更新中发生了什么变化。Listeners、NodeTransitions和Commands大多数使用Lexical完成的工作，除了调用更新之外，都是通过Listeners、NodeTransitions和Commands完成的。这些动作都来自于编辑器实例，从注册开始。另一个重要的特点是所有注册方法都会返回一个函数来轻松取消订阅。constunregisterListener=editor.registerUpdateListener(({editorState})=>{console.log(editorState);});注销监听器（）；命令是用来将Lexical中的所有内容链接在一起的通信系统，当一个键被触发或其他重要信号被触发时，语法在内部调度命令，传入的命令按优先级通过所有处理程序传播，类似于浏览器的时间传播机制//创建自定义命令createCommand()//发送给编辑器示例editor.dispatchCommand(command,payload)//也可以直接注册命令editor.registerCommand(handler,priority)一个简单的例子这个例子可以用来创建一个简单的富文本编辑器：import"./styles.css";importEditorfrom"./Editor";exportdefaultfunctionApp(){return(

RichTextExample

注意：这是Lexical的实验性构建