Preview Updated 2026-05-10

MarkdownEditor

Built-in minimal markdown renderer with split / edit / preview modes. Pass a custom `render` for richer features.

Basic usage

The built-in renderer supports: headings, bold / italic / inline code, fenced code blocks, ordered / unordered lists, blockquotes, --- rules, and links. For richer needs (tables, task lists, extended syntax), pass a custom render.

背景

标题一

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

列表

第一项
第二项
第三项

引用文本

const a = 1;

<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>

<CfMarkdownEditor value={md} onChange={setMd} mode={mode} onModeChange={setMode} />

Read-only + size sm

Combine readOnly with size="sm" for a compact preview panel (e.g. commit message preview).

背景

备注

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

<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>

<CfMarkdownEditor value={md} onChange={set} mode="preview" size="sm" readOnly />

API

Prop	Type	Default	Description
`modelValue` / `value`	`string`	`''`	Markdown source
`mode`	`'split' \| 'edit' \| 'preview'`	`'split'`
`size` / `placeholder` / `rows` / `readOnly`
`render`	`(md: string) => string`	built-in	Custom renderer (returns HTML string)

Note: this component’s output is injected via v-html / dangerouslySetInnerHTML. Sanitize user content first with DOMPurify or similar.