开发预览更新于 2026-05-10

MarkdownEditor Markdown 编辑器

内置最小 markdown 渲染器，支持 split / edit / preview 三种模式。需要更全功能可传 render fn。

基础用法

内置渲染器支持：标题、加粗 / 斜体 / 行内 code、围栏代码块、有序 / 无序列表、引用、--- 分隔线、链接。更复杂场景（表格、任务列表、扩展语法）用 render 自定义。

背景视口

标题一

这是加粗、斜体、inline code 与链接的示例。

列表

第一项
第二项
第三项

引用文本

const a = 1;

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfMarkdownEditor } from '@chufix-design/vue';
const md = ref(`# 标题一

这是 **加粗**、*斜体*、\`inline code\` 与 [链接](https://chufix.com) 的示例。

## 列表

- 第一项
- 第二项
- 第三项

> 引用文本

\`\`\`ts
const a = 1;
\`\`\`
`);
const mode = ref<'split' | 'edit' | 'preview'>('split');
</script>
<template>
  <CfMarkdownEditor v-model="md" :mode="mode" @update:mode="(m) => mode = m" />
</template>

<script setup>
import { ref } from 'vue';
import { CfMarkdownEditor } from '@chufix-design/vue';
const md = ref(`# 标题一

这是 **加粗**、*斜体*、\`inline code\` 与 [链接](https://chufix.com) 的示例。

## 列表

- 第一项
- 第二项
- 第三项

> 引用文本

\`\`\`ts
const a = 1;
\`\`\`
`);
const mode = ref<'split' | 'edit' | 'preview'>('split');
</script>
<template>
  <CfMarkdownEditor v-model="md" :mode="mode" @update:mode="(m) => mode = m" />
</template>

import { useState } from 'react';
import { CfMarkdownEditor } from '@chufix-design/react';

export default function Demo() {
  const [md, setMd] = useState(`# 标题一

  这是 **加粗**、*斜体*、\`inline code\` 与 [链接](https://chufix.com) 的示例。

  ## 列表

  - 第一项
  - 第二项
  - 第三项

  > 引用文本

  \`\`\`ts
  const a = 1;
  \`\`\`
  `);
  const [md, setMd] = useState(`# 标题一

  这是 **加粗**、*斜体*、\`inline code\` 与 [链接](https://chufix.com) 的示例。

  ## 列表

  - 第一项
  - 第二项
  - 第三项

  > 引用文本

  \`\`\`ts
  const a = 1;
  \`\`\`
  `);
  const [mode, setMode] = useState('split');
  const [mode, setMode] = useState('split');
  return (
    <>
      <CfMarkdownEditor value={md} onChange={setMd} mode={mode} onModeChange={setMode} />
    </>
  );
}

import { useState } from 'react';
import { CfMarkdownEditor } from '@chufix-design/react';

export default function Demo() {
  const [md, setMd] = useState(`# 标题一

  这是 **加粗**、*斜体*、\`inline code\` 与 [链接](https://chufix.com) 的示例。

  ## 列表

  - 第一项
  - 第二项
  - 第三项

  > 引用文本

  \`\`\`ts
  const a = 1;
  \`\`\`
  `);
  const [md, setMd] = useState(`# 标题一

  这是 **加粗**、*斜体*、\`inline code\` 与 [链接](https://chufix.com) 的示例。

  ## 列表

  - 第一项
  - 第二项
  - 第三项

  > 引用文本

  \`\`\`ts
  const a = 1;
  \`\`\`
  `);
  const [mode, setMode] = useState('split');
  const [mode, setMode] = useState('split');
  return (
    <>
      <CfMarkdownEditor value={md} onChange={setMd} mode={mode} onModeChange={setMode} />
    </>
  );
}

只读 + size sm

配置 readOnly 和 size="sm" 用作小型预览面板（如 commit message preview）。

背景视口

备注

仅预览模式，content 不可编辑。

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfMarkdownEditor } from '@chufix-design/vue';
const md = ref(`## 备注

仅 **预览** 模式，content 不可编辑。`);
const mode = ref<'split' | 'edit' | 'preview'>('preview');
</script>
<template>
  <CfMarkdownEditor v-model="md" :mode="mode" @update:mode="(m) => mode = m" size="sm" read-only />
</template>

<script setup>
import { ref } from 'vue';
import { CfMarkdownEditor } from '@chufix-design/vue';
const md = ref(`## 备注

仅 **预览** 模式，content 不可编辑。`);
const mode = ref<'split' | 'edit' | 'preview'>('preview');
</script>
<template>
  <CfMarkdownEditor v-model="md" :mode="mode" @update:mode="(m) => mode = m" size="sm" read-only />
</template>

import { useState } from 'react';
import { CfMarkdownEditor } from '@chufix-design/react';

export default function Demo() {
  const [md, setMd] = useState(`## 备注

  仅 **预览** 模式，content 不可编辑。`);
  const [mode, setMode] = useState<'split' | 'edit' | 'preview'>('preview');
  return (
    <>
      <CfMarkdownEditor value={md} onChange={setMd} mode={mode} onModeChange={setMode} size="sm" readOnly />
    </>
  );
}

import { useState } from 'react';
import { CfMarkdownEditor } from '@chufix-design/react';

export default function Demo() {
  const [md, setMd] = useState(`## 备注

  仅 **预览** 模式，content 不可编辑。`);
  const [mode, setMode] = useState<'split' | 'edit' | 'preview'>('preview');
  return (
    <>
      <CfMarkdownEditor value={md} onChange={setMd} mode={mode} onModeChange={setMode} size="sm" readOnly />
    </>
  );
}

API

属性	类型	默认值	说明
`modelValue` / `value`	`string`	`''`	markdown 源
`mode`	`'split' \| 'edit' \| 'preview'`	`'split'`
`size` / `placeholder` / `rows` / `readOnly`
`render`	`(md: string) => string`	内置	自定义渲染（返回 HTML 字符串）

注意：本组件的输出会通过 v-html / dangerouslySetInnerHTML 注入。用户内容请先用 DOMPurify 等手段消毒。