首次搭建milkdown后，如何获取转换后的数据？求助

要获取Milkdown编辑内容转换后的最终输出（比如将# Milkdown :heartpulse: React渲染为带标题和心形图标的HTML），可以通过以下方式实现：

• 直接调用Editor的序列化API
  Milkdown的编辑器实例提供序列化能力，你可以通过serializer上下文获取转换后的HTML内容。在React项目中，先通过useRef获取Milkdown组件实例，再调用对应方法：

  import { useRef } from 'react';
  import { Milkdown, useEditor } from '@milkdown/react';
  import { commonmark } from '@milkdown/preset-commonmark';
  import { emoji } from '@milkdown/plugin-emoji';
  
  const App = () => {
    const editorRef = useRef(null);
    const editor = useEditor((root) => ({
      root,
      presets: [commonmark],
      plugins: [emoji],
      defaultValue: '# Milkdown :heartpulse: React',
    }));
  
    const getRenderedContent = () => {
      if (editorRef.current) {
        // 获取转换后的HTML
        const html = editor.action(ctx => ctx.get(ctx.serializerCtx).serialize());
        console.log('转换后的内容:', html);
      }
    };
  
    return (
      <div>
        <Milkdown ref={editorRef} editor={editor} />
        <button onClick={getRenderedContent}>获取转换内容</button>
      </div>
    );
  };
  
  export default App;
  

• 监听内容更新实时获取
  如果需要在内容变化时自动获取最新转换结果，可通过编辑器的updated事件监听：

  const editor = useEditor((root) => ({
    root,
    presets: [commonmark],
    plugins: [emoji],
    defaultValue: '# Milkdown :heartpulse: React',
    onCreate: (editor) => {
      editor.on('updated', () => {
        const html = editor.action(ctx => ctx.get(ctx.serializerCtx).serialize());
        console.log('实时更新的转换内容:', html);
      });
    },
  }));
  

• 注意事项

  • 确保已安装对应依赖，@milkdown/preset-commonmark包含默认HTML序列化器，第三方插件（如emoji）会自动处理对应内容的序列化逻辑。
  • 调用serialize()时，需保证编辑器已完成初始化（比如在onCreate回调内执行，或通过按钮触发时编辑器已挂载）。

内容的提问来源于stack exchange，提问作者Yeasin Arafat