feat(demo): markdown-editor (developer-plus#28)

package.json

@@ -30,6 +30,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.0.13",
     "qrcode": "^1.5.0",
+    "vditor": "^3.8.13",
     "vue": "^3.2.31",
     "vue-router": "^4.0.14",
     "xlsx": "^0.18.5"

src/layouts/default/sidebar/components/Menu.vue

@@ -31,6 +31,9 @@
       <a-menu-item key="9" @click="handleClick('/demo/cropper')">
         图片裁剪
       </a-menu-item>
+      <a-menu-item key="10" @click="handleClick('/demo/md-editor')">
+        Markdown 编辑器
+      </a-menu-item>
     </a-sub-menu>
     <a-sub-menu key="sub2">
       <template #icon>

src/router/routes/modules/demo.ts

@@ -36,6 +36,11 @@ const route: RouteRecordRaw = {
       path: 'cropper',
       name: 'cropper',
       component: () => import('~/views/demo/cropper/index.vue')
+    },
+    {
+      path: 'md-editor',
+      name: 'md-editor',
+      component: () => import('~/views/demo/md-editor/index.vue')
     }
   ]
 }

src/views/demo/md-editor/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <a-card title="Markdown 编辑器" :bordered="false" w-full>
+    <div ref="domRef">
+      <a-spin tip="正在加载编辑器中" />
+    </div>
+    <div w-full mt="20px" align="center">
+      <p w-full>
+        使用 Viditor 作为 Markdown 编辑器
+      </p>
+      <p w-full>
+        Github Repo: <a href="https://github.com/Vanessa219/vditor">https://github.com/Vanessa219/vditor</a>
+      </p>
+    </div>
+  </a-card>
+  <a-card title="Markdown 显示器">
+    <div v-html="valueHTML" />
+  </a-card>
+  <a-card title="Markdown value HTML">
+    <textarea v-model="valueHTML" readonly w-full h="200px" outline="none" />
+  </a-card>
+</template>
+<script setup lang="ts">
+import { promiseTimeout } from '@vueuse/core'
+import Vditor from 'vditor'
+import 'vditor/dist/index.css'
+
+const domRef = ref<HTMLElement>()
+const editor = ref<Vditor>()
+// 编辑器的最小高度
+const editorInitHeight = ref(300)
+const valueHTML = ref()
+
+function renderEditor() {
+  if (!domRef.value) return
+  editor.value = new Vditor(domRef.value, {
+    // https://ld246.com/article/1549638745630#options
+    // 在官方文档查看查看更多配置项
+    minHeight: editorInitHeight.value,
+    // 编辑器主题：'dark'/'classic'
+    // TODO 等待后期支持黑暗模式，这里需要进行同步切换
+    theme: 'classic',
+    icon: 'ant',
+    // 是否使用 localStorage 缓存，如果 true
+    // 必须给定 id，id 是 localStorage 的 key，例如：cache: { enable: true, id: "hbs-md-editor-value" }
+    cache: { enable: false },
+    value: '# Hello World!\n你好世界',
+    placeholder: '请输入内容...',
+    after() {
+      mockAsyncData()
+      getHTML()
+    },
+    input() {
+      // input 事件
+      getHTML()
+    },
+    focus() {
+      // focus 事件
+    },
+    blur() {
+      // blur 事件
+    },
+    // 'sv': 双屏 | 'ir': 即时预览 | 'wysiwyg': 所见即所得
+    mode: 'ir',
+    counter: {
+      enable: true, // 启用计数器
+      max: 500, // 最大值
+      type: 'markdown' // 统计的类型： markdown | text
+    },
+    outline: {
+      enable: true, // 是否展示大纲
+      position: 'left' // 大纲位置，'left' | 'right'
+    }
+  })
+}
+
+function getHTML() {
+  valueHTML.value = editor.value?.getHTML()
+}
+
+async function mockAsyncData() {
+  await promiseTimeout(2000)
+  editor.value?.setValue('模拟异步数据')
+  getHTML()
+}
+
+onMounted(() => {
+  renderEditor()
+})
+
+onBeforeUnmount(() => {
+  // 组件销毁，同时销毁编辑器
+  editor.value?.destroy()
+})
+</script>