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

CHANGELOG.md

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

apps/web-antd/src/views/演示使用自行删除/changelog/index.vue

@@ -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>

packages/effects/common-ui/src/components/markdown/editor.vue

@@ -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,

packages/effects/common-ui/src/components/markdown/index.ts

@@ -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';

packages/effects/common-ui/src/components/markdown/preview.vue

@@ -17,18 +17,10 @@ import 'vditor/dist/index.css';
 const props = defineProps({
   // 编辑器高度
   height: {
-    type: Number,
+    // string或者number类型
+    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>