如何从Lexical React编辑器中获取Markdown格式的值？

要从Lexical编辑器中获取Markdown格式的内容，你需要使用Lexical提供的$generateMarkdownFromNodes API，结合对应的Markdown转换器完成节点到Markdown的转换。具体步骤如下：

1. 导入必要模块 #

添加两个关键依赖的导入：

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $generateMarkdownFromNodes } from '@lexical/markdown';

2. 获取编辑器实例并生成Markdown #

在Editor组件中，通过useLexicalComposerContext拿到编辑器实例，然后在onChange回调里调用转换函数生成Markdown：

export default function Editor() {
  // 获取Lexical编辑器实例
  const [editor] = useLexicalComposerContext();

  const onChange = (editorState) => {
    // 在只读上下文环境中生成Markdown
    const markdownContent = editorState.read(() => {
      // 参数分别为编辑器实例、null（表示转换全部内容）、已配置的转换器集合
      return $generateMarkdownFromNodes(editor, null, TRANSFORMERS);
    });
    
    // 这里可以处理生成的Markdown，比如打印、存入状态或提交后端
    console.log('Markdown内容:', markdownContent);
  };

  // 其余组件代码保持不变
}

关键说明 #

• $generateMarkdownFromNodes必须在editorState.read()的回调中执行，因为只有在Lexical的只读上下文里才能安全访问编辑器节点。
• 你已在MarkdownShortcutPlugin中使用的TRANSFORMERS包含了标题、列表、引用等节点对应的Markdown转换规则，确保它覆盖了你配置的所有nodes类型即可。

内容的提问来源于stack exchange，提问作者Abdulkadir KG