如何切换 Lexical 编辑器的只读与可编辑模式并监听模式变化【免费下载链接】lexicalLexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.项目地址: https://gitcode.com/GitHub_Trending/le/lexicalLexical 编辑器有 Read mode只读和 Edit mode可编辑两种模式默认行为是 Edit mode。底层实现上编辑器会根据当前模式把contentEditable设为false或true而具体插件可以监听模式变化据此定制部分 UI。本文对应场景你需要在运行时把编辑器在只读与可编辑之间来回切换例如“预览 / 编辑”按钮并让工具栏等界面随模式自动更新。以下写法均来自 只读模式文档涉及纯 JS API 与lexical/react两条路径。在创建编辑器时指定初始模式创建编辑器时可以直接指定模式const editor createEditor({ editable: true, ... })如果项目使用lexical/react则把editable放进传给LexicalComposer的initialConfigLexicalComposer initialConfig{{editable: true}} ... /LexicalComposer需要一开始就是只读的编辑器时把该值设为false即可。仓库示例 ChatMessage.tsx 就是这种用法聊天中的历史消息编辑器以editable: false创建仅用于展示。运行时切换模式编辑器创建之后用setEditable命令式地改变模式editor.setEditable(true);Playground 里“预览 / 编辑”切换按钮的实现就是取反当前值见 ActionsPlugineditor.setEditable(!editor.isEditable());isEditable()同时就是读取当前模式的 APIconst isEditable editor.isEditable(); // Returns true or false监听模式变化要感知模式切换注册registerEditableListener回调参数就是切换后的模式值文档原文示例const removeEditableListener editor.registerEditableListener( (isEditable) { // The editors mode is passed in! console.log(isEditable); }, ); // Do not forget to unregister the listener when no longer needed! removeEditableListener();该 API 的要点见 LexicalEditor.ts 的注释每次编辑器在可编辑与不可编辑状态之间发生转换时触发回调返回一个 teardown 函数调用它即可移除监听直到 teardown 被调用前监听一直生效如果监听器本身返回了一个函数该函数会在下次状态转换或 teardown 之前被调用。文档同时强调监听不再需要时务必调用返回的注销函数不要泄漏监听器。React 中的推荐写法useLexicalEditable在 React 里官方建议优先使用lexical/react提供的useLexicalEditableHook而不是手动注册监听。其源码注释原话是手动用registerEditableListener观察值“比较难写对尤其是在 React StrictMode开发模式默认开启或并发特性下”见 useLexicalEditable.ts/** * Get the current value for {link LexicalEditor.isEditable} * using {link useLexicalSubscription}. * You should prefer this over manually observing the value with * {link LexicalEditor.registerEditableListener}, * which is a bit tricky to do correctly, particularly when using * React StrictMode (the default for development) or concurrency. */ export function useLexicalEditable(): booleanuseLexicalEditable()内部同样基于registerEditableListener订阅见 useLexicalEditable.ts 中的subscription函数初始值取自editor.isEditable()订阅走editor.registerEditableListener(callback)因此 React 组件可以直接把它当响应式状态用随模式变化自动重渲染不需要自己管理注销。验证与限制验证方式直接来自文档给出的两个 API切换前后调用editor.isEditable()返回值应随setEditable调用在true/false之间变化调用editor.setEditable(...)后已注册的registerEditableListener回调会收到新的模式值Playground 用它驱动工具栏状态editor.registerEditableListener(editable setIsEditable(editable))见 ActionsPlugin。需要留意的边界默认模式是 Edit mode即非只读只读需要显式设置editable: false或调用editor.setEditable(false)纯 JS 路径下监听器必须手动注销React 路径建议改用useLexicalEditable避免在 StrictMode 下出错该机制只控制编辑器本体contentEditable的 true/false与插件可感知的模式信号文档未将其扩展到“部分区域可编辑”等更细粒度的控制。完成切换与监听之后你就可以在此基础上实现“预览 / 编辑”按钮并根据isEditable的值决定工具栏按钮的显示或禁用状态。【免费下载链接】lexicalLexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.项目地址: https://gitcode.com/GitHub_Trending/le/lexical创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考