feat: rich text editor

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>

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,
+      },
+    },
   ],
 }