# Markdown 基于 [Vditor](https://github.com/Vanessa219/vditor) 的 MarkDown 編輯器 ## Usage ```vue <template> <div class="p-4"> <a-button @click="toggleTheme" class="mb-2" type="primary">黑暗主題</a-button> <MarkDown v-model:value="value" ref="markDownRef" /> </div> </template> <script lang="ts"> import { defineComponent, ref, unref } from 'vue'; import { MarkDown, MarkDownActionType } from '/@/components/Markdown'; export default defineComponent({ components: { MarkDown }, setup() { const markDownRef = ref<Nullable<MarkDownActionType>>(null); const valueRef = ref(` # title # content `); function toggleTheme() { const markDown = unref(markDownRef); if (!markDown) return; const vditor = markDown.getVditor(); vditor.setTheme('dark'); } return { value: valueRef, toggleTheme, markDownRef, }; }, }); </script> ``` ## Props ::: tip 除以下兩個外，props 還可以傳入 vidtor 的所有屬性。可用 v-bind 統一綁定 ::: | 屬性 | 類型 | 默認值 | 可選值 | 說明 | | ------- | -------- | ------ | ------ | -------------- | | v-model | `string` | - | - | 雙向綁定文本值 | | height | `number` | - | - | 高度 | ### Methods | 名稱 | 回調參數 | 說明 | | --------- | ---------- | ---------------- | | getVditor | `Function` | 獲取 vditor 實例 |