feat: markdown组件(开发中)

This commit is contained in:
dap 2024-10-14 21:15:47 +08:00
parent 86a2539d27
commit 72ae9edd2c
7 changed files with 205 additions and 1 deletions

View File

@ -220,7 +220,7 @@
"commentTranslate.multiLineMerge": true,
"vue.server.hybridMode": true,
"vitest.disableWorkspaceWarning": true,
"cSpell.words": ["tinymce"],
"cSpell.words": ["tinymce", "vditor"],
"typescript.tsdk": "node_modules/typescript/lib",
"editor.linkedEditing": true, // html,
"vscodeCustomCodeColor.highlightValue": "v-access", // v-access

View File

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

View File

@ -40,6 +40,7 @@
"@vueuse/integrations": "catalog:",
"codemirror": "^6.0.1",
"qrcode": "catalog:",
"vditor": "^3.10.6",
"vue": "catalog:",
"vue-codemirror6": "^1.3.4",
"vue-json-pretty": "^2.4.0",

View File

@ -2,6 +2,7 @@ export * from './captcha';
export * from './code-mirror';
export * from './ellipsis-text';
export * from './json-preview';
export * from './markdown';
export * from './page';
export * from '@vben-core/form-ui';
export * from '@vben-core/popup-ui';

View File

@ -0,0 +1,93 @@
<script setup lang="ts">
import {
onBeforeUnmount,
onMounted,
type PropType,
shallowRef,
useTemplateRef,
watch,
} from 'vue';
import { usePreferences } from '@vben/preferences';
import Vditor from 'vditor';
import 'vditor/dist/index.css';
const props = defineProps({
//
height: {
// stringnumber
type: [String, Number],
default: 500,
},
// ID 使
id: {
type: String,
required: true,
},
enableCache: {
type: Boolean,
default: false,
},
//
options: {
type: Object as PropType<IOptions>,
default: () => ({}),
},
});
const emit = defineEmits<{
// cdn
mounted: [];
}>();
//
const vditorRef = useTemplateRef('vditorRef');
//
const vditorInstance = shallowRef<null | Vditor>(null);
// x
const { isDark, locale } = usePreferences();
watch(isDark, (dark) => {
const theme = dark ? 'dark' : 'light';
vditorInstance.value?.setTheme(dark ? 'dark' : 'classic', theme, theme);
});
//
const content = defineModel('value', {
type: String,
default: '',
});
onMounted(() => {
vditorInstance.value = new Vditor(vditorRef.value!, {
value: content.value,
height: props.height,
lang: locale.value.replace('-', '_') as any,
cache: {
enable: props.enableCache,
id: props.id,
},
theme: isDark.value ? 'dark' : 'classic',
//
input(value) {
content.value = value;
},
//
after() {
emit('mounted');
},
...props.options,
});
});
onBeforeUnmount(() => {
vditorInstance.value?.destroy();
vditorInstance.value = null;
});
</script>
<template>
<div ref="vditorRef"></div>
</template>

View File

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

View File

@ -0,0 +1,92 @@
<script setup lang="ts">
import {
onBeforeUnmount,
onMounted,
type PropType,
shallowRef,
useTemplateRef,
watch,
} from 'vue';
import { usePreferences } from '@vben/preferences';
import Vditor from 'vditor';
import 'vditor/dist/index.css';
const props = defineProps({
//
height: {
type: Number,
default: 500,
},
// ID 使
id: {
type: String,
required: true,
},
enableCache: {
type: Boolean,
default: false,
},
//
options: {
type: Object as PropType<IOptions>,
default: () => ({}),
},
});
const emit = defineEmits<{
// cdn
mounted: [];
}>();
//
const vditorRef = useTemplateRef('vditorRef');
//
const vditorInstance = shallowRef<null | Vditor>(null);
// x
const { isDark, locale } = usePreferences();
watch(isDark, (dark) => {
const theme = dark ? 'dark' : 'light';
vditorInstance.value?.setTheme(dark ? 'dark' : 'classic', theme, theme);
});
//
const content = defineModel('value', {
type: String,
default: '',
});
onMounted(() => {
vditorInstance.value = new Vditor(vditorRef.value!, {
value: content.value,
height: props.height,
lang: locale.value.replace('-', '_') as any,
cache: {
enable: props.enableCache,
id: props.id,
},
theme: isDark.value ? 'dark' : 'classic',
//
input(value) {
content.value = value;
},
//
after() {
emit('mounted');
},
...props.options,
});
});
onBeforeUnmount(() => {
vditorInstance.value?.destroy();
vditorInstance.value = null;
});
</script>
<template>
<div ref="vditorRef"></div>
</template>