注意：Lexical 目前处于早期开发阶段，API 和包可能会经常更改。
Lexical 是一个可扩展的 JavaScript Web 文本编辑器框架，强调可靠性、可访问性和性能。 Lexical 旨在提供一流的开发人员体验，因此用户可以轻松地制作原型并构建功能。结合高度可扩展的架构，Lexical 允许开发者创建编辑器，并在规模和功能上进行扩展。
以下是可以使用 Lexical 执行哪些操作的一些示例：
开始使用 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 startnpm run test- 服务器需要为 e2e 测试运行
评论