For AI agents: the complete documentation index is available at https://a3s-lab.github.io/Office/docs/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/Office/docs/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/Office/docs/components/markdown.md.
  • 简体中文
  • latest
  • MarkdownEditor

    MarkdownEditor 默认使用可拖动分隔线的“左侧源码、右侧预览”模式。 Markdown 字符串始终是唯一持久化来源,TipTap 提供可视化编辑能力。

    桌面与平板端保持左右分栏,分隔线同时支持鼠标和键盘调整。预览区直接使用完整阅读 界面,不再在工作区内重复嵌套卡片;正文宽度、标题、引用、代码、表格和任务列表使用 统一的阅读排版。

    手机端默认显示源码,并提供“源码 / 预览”切换。每个界面独占剩余工作区,切换不会 改变当前编辑模式或受控内容,两个操作都保留适合触控的尺寸。

    属性

    属性类型必填默认值说明
    contentMarkdownContent受控 Markdown 内容。
    onChange(content: MarkdownContent) => void返回完整的新内容。
    previewbooleanfalse只读渲染。
    saveStatusstring由宿主管理的保存状态。
    fileActionsreadonly OfficeFileAction[][]宿主文件操作。
    extensionsExtensions[]附加 TipTap Extension。
    getSelectionMenuItemsGetMarkdownSelectionMenuItems内置菜单替换源码与可视化界面的选区菜单。
    theme'light' | 'dark' | 'system''system'配色模式。

    内容结构

    interface MarkdownContent {
      type: 'markdown';
      markdown: string;
    }

    受控源码历史会合并连续输入,把明确命令保留为独立记录,在撤销和重做时恢复源码选区, 并在宿主替换内容后重新建立历史基线。

    响应式分栏

    • 桌面分隔线可在 30% 至 70% 之间拖动,也支持方向键、Home、End 和 Enter,并保持 两侧按比例同步滚动。
    • 手机切换按钮会明确标记当前界面,触控高度不小于 44 px。
    • 仅源码和仅可视化模式继续独占工作区,不显示分栏切换。

    选区菜单

    宿主菜单同时覆盖源码和可视化选区。快照通过 selection.surface 标识当前界面,并提供 精确选中文本、相邻内容、完整 Markdown、渲染后的纯文本和安全的替换、插入命令。

    import type { GetMarkdownSelectionMenuItems } from '@a3s-lab/office/core';
    
    const getSelectionMenuItems: GetMarkdownSelectionMenuItems = (context) => [
      {
        id: 'summarize',
        label: '总结',
        run: async () => {
          const summary = await summarize(context.document.markdown);
          await context.commands.replaceText(summary);
        },
      },
    ];

    新增 Node 或 Mark 的 Extension 必须同时提供 Markdown 解析与序列化规则,否则结构无法 在切换源码视图后保留。