From 09579837c99a2c5fbb80441f2377b93b4088f8d2 Mon Sep 17 00:00:00 2001
From: Coffee-crocodile <1147347984@qq.com>
Date: Wed, 12 Oct 2022 16:04:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(project):=20=E5=A2=9E=E5=8A=A0md=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E5=92=8C=E5=AF=8C=E6=96=87=E6=9C=AC=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                           |  3 ++
 src/views/plugin/editor/md/index.vue   | 13 +++++--
 src/views/plugin/editor/rich/index.vue | 49 ++++++++++++++++++++++++--
 vite.config.ts                         |  3 ++
 4 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 304438c..d904fa9 100644
--- a/package.json
+++ b/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",
diff --git a/src/views/plugin/editor/md/index.vue b/src/views/plugin/editor/md/index.vue
index 8fe0d81..ff02554 100644
--- a/src/views/plugin/editor/md/index.vue
+++ b/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>
diff --git a/src/views/plugin/editor/rich/index.vue b/src/views/plugin/editor/rich/index.vue
index 91e4437..3b49891 100644
--- a/src/views/plugin/editor/rich/index.vue
+++ b/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>
diff --git a/vite.config.ts b/vite.config.ts
index 8e26e23..8ef8893 100644
--- a/vite.config.ts
+++ b/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'],
+    },
   };
 });