Lexical —— Facebook 开源的文本编辑器框架
注意：Lexical 目前处于早期开发阶段，API 和包可能会经常更改。 Lexical 是一个可扩展的 JavaScript Web 文本编辑器框架，强调可靠性、可访问性和性能。 Lexical 旨在提供一流的开发人员体验，因此用户可以轻松地制作原型并构建功能。结合高度可扩展的架构，Lexical 允许开发者创建编辑器，并在规模和功能上进行扩展。 以下是可以使用 Lexical 执行哪些操作的一些示例： Lexical Playground Plain text sandbox Rich text sandbox 开始使用 React 注意：Lexical 不仅限于 React。 一旦创建了该库的绑定，Lexical 就可以支持任何基于 DOM 的底层库。 安装 lexical和 @lexical/react: npm install --save lexical @lexical/react 下面是一个使用 lexical和 @lexical/react纯文本编辑器的示例 import {$getRoot, $getSelection} from 'lexical'; import {useEffect} from 'react'; import LexicalComposer from '@lexical/react/LexicalComposer'; import LexicalPlainTextPlugin from '@lexical/react/LexicalPlainTextPlugin'; import LexicalContentEditable from '@lexical/react/LexicalContentEditable'; import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin'; import LexicalOnChangePlugin from '@lexical/react/LexicalOnChangePlugin'; import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext'; const theme = { // Theme styling goes here ... } // When the editor changes, you can get notified via the // LexicalOnChangePlugin! function onChange(editorState) { editorState.read(() => { // Read the contents of the EditorState here. const root = $getRoot(); const selection = $getSelection(); console.log(root, selection); }); } // Lexical React plugins are React components, which makes them // highly composable. Furthermore, you can lazy load plugins if // desired, so you don't pay the cost for plugins until you // actually use them. function MyCustomAutoFocusPlugin() { const [editor] = useLexicalComposerContext(); useEffect(() => { // Focus the editor when the effect fires! editor.focus(); }, [editor]); return null; } // Catch any errors that occur during Lexical updates and log them // or throw them as needed. If you don't throw them, Lexical will // try to recover gracefully without losing user data. function onError(error) { console.error(error); } function Editor() { const initialConfig = { theme, onError, }; return ( <LexicalComposer initialConfig={initialConfig}> <LexicalPlainTextPlugin contentEditable={<LexicalContentEditable />} placeholder={<div>Enter some text...</div>} /> <LexicalOnChangePlugin onChange={onChange} /> <HistoryPlugin /> <MyCustomAutoFocusPlugin /> </LexicalComposer> ); } Lexical 是一个框架 Lexical 的核心是一个无依赖的文本编辑器框架。在设计上，Lexical 的核心尽量做到最小化。它将各个功能的逻辑通过插件接口包含在内，并在需要时使用。这确保了极大的可扩展性并将代码大小保持在最低限度。 为 Lexical 做贡献 克隆此仓库 安装依赖项 npm install 启动本地服务器并运行测试 npm run start npm run test 服务器需要为 e2e 测试运行 可选，但推荐使用 VS Code 进行开发 下载并安装 VSCode 安装扩展 Flow 语言支持 确保遵循文件中的设置步骤 Prettier 将 prettier 设置为默认格式化程序 editor.defaultFormatter 可选：在保存 editor.formatOnSave 时设置格式 ESlint
