編輯器
Editor Markdown
以 markdown 字串為內容；content-type="markdown" 雙向轉換。
安裝
markdown 模式來自 tiptap @tiptap/markdown；admin-rich-editor／admin-editor 不自動注入，需自行安裝並經 :extensions 傳入：
Terminal
pnpm add @tiptap/markdownimport { Markdown } from '@tiptap/markdown'用法
<script setup lang="ts">import type { JSONContent } from '@tiptap/core'import { Markdown } from '@tiptap/markdown'import { ref } from 'vue'import { cn } from '@/lib/utils'import { baseProseClass } from '@/components/admin/editor'import { AdminEditorToolbar, defaultEditorItems } from '@/components/admin/editor-toolbar'import { AdminRichEditor, starterKitProseClass } from '@/components/admin/rich-editor'const value = ref<JSONContent | string>(`# 歡迎使用 admin-rich-editor這是 **markdown 模式**,v-model 出向 / 入向皆為 markdown 字串。- 項目一- 項目二> 引言區塊`)</script><template> <div class="flex flex-col gap-4"> <admin-rich-editor v-slot="{ editor, handlers }" v-model="value" content-type="markdown" :extensions="[Markdown.configure({})]" :ui="{ base: cn(baseProseClass, starterKitProseClass) }" > <admin-editor-toolbar :editor :handlers="handlers" :items="defaultEditorItems" /> </admin-rich-editor> <div> <p class="mb-2 text-xs text-text-50">v-model 同步的 markdown 字串:</p> <pre class="overflow-x-auto rounded-sm border border-text-20 bg-bg-90 p-3 text-xs text-text-90" >{{ value }}</pre> </div> </div></template>在 <AdminRichEditor>（或 <AdminEditor>）加上 content-type="markdown"、用 markdown 字串綁 v-model，並把 Markdown.configure({}) 傳進 :extensions：
<script setup lang="ts">import { Markdown } from '@tiptap/markdown'const md = ref('# 標題\n\n內文')</script><template> <admin-rich-editor v-model="md" content-type="markdown" :extensions="[Markdown.configure({})]" /></template>注入後：
- v-model 輸出走
editor.getMarkdown() - v-model 寫入走
setContent(value, { contentType: 'markdown' })
進階 configure
關掉 markdown shortcuts（# 自動轉 heading）或改 indentation，在 configure 帶選項即可：
<script setup lang="ts">import { Markdown } from '@tiptap/markdown'const customMarkdown = Markdown.configure({ // markdownShortcuts: false, // 關掉自動 shortcut // indentation: { style: 'tab' },})</script><template> <admin-rich-editor v-model="md" content-type="markdown" :extensions="[customMarkdown]" /></template>API 參考
@tiptap/markdown 套件 API 詳見 tiptap markdown 官方文件。
注意事項
- extension 必須在建立編輯器時注入：未注入
Markdown時，markdown 序列化會失效並退回純文字。 - 來回轉換不保證字元級一致：HTML 與 markdown 互轉時，多餘空白與換行可能被正規化、
<br>讀回可能變單一換行、inline mark 的嵌套順序（粗體與斜體）可能調整。段落、標題、列表、連結、強調等核心元素轉換後外觀一致；若內容需要逐字元穩定（例如要進版控 diff），改用contentType="html"或contentType="json"。