VueVditor.vue
<script setup lang="ts"> import Vditor from 'vditor'; import 'vditor/dist/index.css'; import { onMounted, ref, watch, toRaw, onUnmounted, unref } from 'vue'; const emit = defineEmits([ 'update:modelValue', 'after', 'focus', 'blur', 'esc', 'ctrlEnter', 'select', ]); const props = defineProps({ options: { type: Object, }, modelValue: { type: String, default: '', }, }); const contentEditor = ref<Vditor | null>(); const editorRef = ref<string | HTMLElement>(); onMounted(() => { contentEditor.value = new Vditor(editorRef.value as HTMLElement, { ...props.options, value: props.modelValue, after() { emit('after', toRaw(contentEditor.value)); }, input(value: string) { emit('update:modelValue', value); }, focus(value: string) { emit('focus', value); }, blur(value: string) { emit('blur', value); }, esc(value: string) { emit('esc', value); }, ctrlEnter(value: string) { emit('ctrlEnter', value); }, select(value: string) { emit('select', value); }, }); }); watch( () => props.modelValue, (newVal) => { if (newVal !== contentEditor.value?.getValue()) { contentEditor.value?.setValue(newVal); } } ); onUnmounted(() => { const editorInstance = unref(contentEditor); if (!editorInstance) return; try { editorInstance?.destroy?.(); } catch (error) { console.log(error); } }); </script> <template> <div ref="editorRef"></div> </template>
MarkdownEditor.vue
<script setup lang="ts"> import { defineAsyncComponent, ref } from 'vue'; const VueVditor = defineAsyncComponent(() => import('@/components/VueVditor/VueVditor.vue')); const content = ref(''); const options = { toolbar: [ 'headings', 'bold', 'italic', 'strike', 'link', '|', 'list', 'ordered-list', 'check', 'outdent', 'indent', '|', 'quote', 'line', 'code', 'inline-code', 'insert-before', 'insert-after', '|', 'upload', 'table', '|', 'undo', 'redo', '|', 'fullscreen', 'edit-mode', { name: 'more', toolbar: [ 'both', 'code-theme', 'content-theme', 'export', 'outline', 'preview', 'devtools', 'info', 'help' ] } ], height: 360, cache: { enable: false }, fullscreen: { index: 3000 } }; </script> <template> <div class="markdown"> <vue-vditor v-model="content" :options="options" /> </div> </template>
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于