feat(project): 增加md编辑器和富文本编辑器

package.json

@@ -24,8 +24,11 @@
     "./src/**/*.{js,jsx,ts,tsx,less,json}": "prettier --loglevel warn --write"
   },
   "dependencies": {
+    "@wangeditor/editor": "^5.1.21",
+    "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^0.27.2",
     "echarts": "^5.4.0",
+    "md-editor-v3": "^2.3.0",
     "pinia": "^2.0.20",
     "pinia-plugin-persist": "^1.0.0",
     "vue": "^3.2.37",

src/views/plugin/editor/md/index.vue

@@ -1,7 +1,16 @@
 <template>
-  <div>markdown</div>
+  <n-card>
+    <md-editor v-model="text" :preview-only="false" />
+  </n-card>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import MdEditor from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+// https://github.com/imzbf/md-editor-v3/blob/dev/README-CN.md
+
+const text = ref('# Hello Editor');
+</script>
 
 <style scoped></style>

src/views/plugin/editor/rich/index.vue

@@ -1,7 +1,52 @@
 <template>
-  <div>富文本</div>
+  <n-card>
+    <div style="border: 1px solid #ccc">
+      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :default-config="toolbarConfig" :mode="mode" />
+      <Editor
+        v-model="valueHtml"
+        style="height: 500px; overflow-y: hidden"
+        :default-config="editorConfig"
+        :mode="mode"
+        @onCreated="handleCreated"
+      />
+    </div>
+  </n-card>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import '@wangeditor/editor/dist/css/style.css'; // 引入 css
+import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+
+// https://www.wangeditor.com/v5/getting-started.html
+
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+// 编辑器模式
+const mode = 'default'; // 或 'simple'
+// 内容 HTML
+const valueHtml = ref('<p>hello</p>');
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>';
+  }, 1500);
+});
+
+const toolbarConfig = {};
+const editorConfig = { placeholder: '请输入内容...' };
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+
+const handleCreated = (editor: string) => {
+  editorRef.value = editor; // 记录 editor 实例，重要！
+};
+</script>
 
 <style scoped></style>

vite.config.ts

@@ -40,5 +40,8 @@ export default defineConfig(({ command, mode }: ConfigEnv) => {
       reportCompressedSize: false, // 启用/禁用 gzip 压缩大小报告
       sourcemap: false, // 构建后是否生成 source map 文件
     },
+    optimizeDeps: {
+      include: ['echarts', 'md-editor-v3', '@wangeditor/editor', '@wangeditor/editor-for-vue'],
+    },
   };
 });