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;

<CfMarkdownEditor v-model="md" :mode="mode" @update:mode="setMode" />

<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 不可编辑。

<CfMarkdownEditor v-model="md" mode="preview" size="sm" read-only />

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