1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
| <script setup lang="ts">
| import {
| onBeforeUnmount,
| onMounted,
| shallowRef,
| useTemplateRef,
| watch,
| } from 'vue';
|
| import { usePreferences } from '@vben/preferences';
|
| import Vditor from 'vditor';
|
| import 'vditor/dist/index.css';
|
| interface Props {
| height?: number | string;
| options?: IOptions;
| }
|
| const props = withDefaults(defineProps<Props>(), {
| height: 500,
| options: () => ({}),
| });
|
| 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: '',
| });
|
| /**
| * 由于不能输入 需要使用watch监听
| */
| watch(content, (value) => {
| vditorInstance.value?.setValue(value);
| });
|
| onMounted(() => {
| vditorInstance.value = new Vditor(vditorRef.value!, {
| mode: 'wysiwyg',
| value: content.value,
| height: props.height,
| // 开启打字机模式
| // typewriterMode: true,
| lang: locale.value.replace('-', '_') as any,
| cache: {
| enable: false,
| },
| theme: isDark.value ? 'dark' : 'classic',
| // 预览(只读模式) 不显示工具栏
| toolbar: [],
| // 加载完成的事件
| after() {
| emit('mounted');
| // 禁用编辑器
| vditorInstance.value?.disabled();
| },
| ...props.options,
| });
| });
|
| onBeforeUnmount(() => {
| vditorInstance.value?.destroy();
| vditorInstance.value = null;
| });
| </script>
|
| <template>
| <div ref="vditorRef"></div>
| </template>
|
| <style>
| .vditor-wysiwyg pre.vditor-reset[contenteditable='false'] {
| cursor: unset;
| opacity: 1;
| }
|
| /**
| dark模式样式需要重置
| */
| .vditor--dark .vditor-reset {
| color: #d1d5da;
| }
| </style>
|
|
