Markdown
基于Vditor的 MarkDown 编辑器
Usage
<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 实例 |