From 99ddb4fe709f973e50006d3ba0b50e23c24266f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Thu, 29 Sep 2022 08:55:26 +0800
Subject: [PATCH] feat: rich text editor

---
 src/views/demo/editor/rich-text.vue | 27 +++++++++++++++++++++++++++
 src/views/demo/route.js             | 12 ++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 src/views/demo/editor/rich-text.vue

diff --git a/src/views/demo/editor/rich-text.vue b/src/views/demo/editor/rich-text.vue
new file mode 100644
index 0000000..eb8c896
--- /dev/null
+++ b/src/views/demo/editor/rich-text.vue
@@ -0,0 +1,27 @@
+<template>
+  <AppPage>
+    <div h-full flex-col border-1 bc-ccc>
+      <WangToolbar border-b bc-ccc :editor="editorRef" :default-config="toolbarConfig" mode="default" />
+      <WangEditor
+        v-model="valueHtml"
+        style="flex: 1; overflow-y: hidden"
+        :default-config="editorConfig"
+        mode="default"
+        @on-created="handleCreated"
+      />
+    </div>
+  </AppPage>
+</template>
+
+<script setup>
+import '@wangeditor/editor/dist/css/style.css'
+import { Editor as WangEditor, Toolbar as WangToolbar } from '@wangeditor/editor-for-vue'
+const editorRef = shallowRef()
+const toolbarConfig = { excludeKeys: 'fullScreen' }
+const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} }
+const valueHtml = ref('')
+
+const handleCreated = (editor) => {
+  editorRef.value = editor
+}
+</script>
diff --git a/src/views/demo/route.js b/src/views/demo/route.js
index 0a462c3..a7c6041 100644
--- a/src/views/demo/route.js
+++ b/src/views/demo/route.js
@@ -37,5 +37,17 @@ export default {
         keepAlive: true,
       },
     },
+    {
+      name: 'RichTextEditor',
+      path: 'rich-text',
+      component: () => import('./editor/rich-text.vue'),
+      meta: {
+        title: '富文本编辑器',
+        icon: 'ic:sharp-text-rotation-none',
+        role: ['admin'],
+        requireAuth: true,
+        keepAlive: true,
+      },
+    },
   ],
 }