feat: Markdown编辑/预览组件(基于vditor)

This commit is contained in:
dap 2024-10-15 08:31:39 +08:00
parent 72ae9edd2c
commit c27acef777
5 changed files with 65 additions and 17 deletions

View File

@ -6,6 +6,7 @@
- 全局表格加上id 方便进行缓存列排序的操作
- 支持菜单名称i18n
- 登录页 验证码登录
- Markdown编辑/预览组件(基于vditor)
**BUG FIXES**

View File

@ -1,15 +1,24 @@
<script setup lang="ts">
import { ref } from 'vue';
import { MarkdownEditor, Page } from '@vben/common-ui';
import { MarkdownPreviewer, Page } from '@vben/common-ui';
import { Skeleton } from 'ant-design-vue';
import changelog from '../../../../../../CHANGELOG.md?raw';
const content = ref(changelog);
const loading = ref(true);
</script>
<template>
<Page :auto-content-height="true">
<MarkdownEditor id="changelog" v-model:value="content" height="100%" />
<Skeleton v-show="loading" active />
<MarkdownPreviewer
v-model:value="content"
height="100%"
@mounted="loading = false"
/>
</Page>
</template>

View File

@ -21,15 +21,38 @@ const props = defineProps({
type: [String, Number],
default: 500,
},
// ID 使
/**
* 编辑模式默认值: 'wysiwyg'
* wysiwyg: 所见即所得
* ir: 即时渲染
* sv: 分屏预览
*/
mode: {
type: String as PropType<'ir' | 'sv' | 'wysiwyg'>,
default: 'wysiwyg',
},
// ID 使
id: {
type: String,
required: true,
required: false,
default: '',
validator(value, props) {
if (!value && props.enableCache) {
console.warn('The id is required when enableCache is true');
return false;
}
return true;
},
},
enableCache: {
type: Boolean,
default: false,
},
//
disabled: {
type: Boolean,
default: false,
},
//
options: {
type: Object as PropType<IOptions>,
@ -60,8 +83,19 @@ const content = defineModel('value', {
default: '',
});
//
function changeDisabled(disabled: boolean) {
if (disabled) {
vditorInstance.value?.disabled();
} else {
vditorInstance.value?.enable();
}
}
watch(() => props.disabled, changeDisabled);
onMounted(() => {
vditorInstance.value = new Vditor(vditorRef.value!, {
mode: props.mode,
value: content.value,
height: props.height,
lang: locale.value.replace('-', '_') as any,
@ -76,6 +110,8 @@ onMounted(() => {
},
//
after() {
//
changeDisabled(props.disabled);
emit('mounted');
},
...props.options,

View File

@ -1,2 +1,2 @@
export { default as MarkdownEditor } from './editor.vue';
export { default as MarkdownPreview } from './preview.vue';
export { default as MarkdownPreviewer } from './preview.vue';

View File

@ -17,18 +17,10 @@ import 'vditor/dist/index.css';
const props = defineProps({
//
height: {
type: Number,
// stringnumber
type: [String, Number],
default: 500,
},
// ID 使
id: {
type: String,
required: true,
},
enableCache: {
type: Boolean,
default: false,
},
//
options: {
type: Object as PropType<IOptions>,
@ -65,10 +57,11 @@ onMounted(() => {
height: props.height,
lang: locale.value.replace('-', '_') as any,
cache: {
enable: props.enableCache,
id: props.id,
enable: false,
},
theme: isDark.value ? 'dark' : 'classic',
// ()
toolbar: [],
//
input(value) {
content.value = value;
@ -76,6 +69,8 @@ onMounted(() => {
//
after() {
emit('mounted');
//
vditorInstance.value?.disabled();
},
...props.options,
});
@ -90,3 +85,10 @@ onBeforeUnmount(() => {
<template>
<div ref="vditorRef"></div>
</template>
<style>
.vditor-ir pre.vditor-reset[contenteditable='false'] {
cursor: unset;
opacity: 1;
}
</style>