feat: add editor

src/locales/ch.json

@@ -3,6 +3,7 @@
   "LoginOut": "退出系统",
   "usermanagement": "用户管理",
   "baseinfo": "基础信息",
+  "editor": "编辑器",
   "error": "错误页面",
   "404": "404",
   "401": "401",

src/locales/en.json

@@ -3,6 +3,7 @@
   "LoginOut": "Login Out",
   "usermanagement": "User Manage",
   "baseinfo": "Base Info",
+  "editor": "Editor",
   "error": "Error Page",
   "404": "404",
   "401": "401",

src/router/index.ts

@@ -109,6 +109,30 @@ const routes: Array<RouteRecordRaw> = [
       savedPosition: true
     }
   },
+  {
+    path: '/editor',
+    name: 'editor',
+    component: Layout,
+    redirect: '/editor/index',
+    children: [
+      {
+        path: '/editor/index',
+        component: () => import(/* webpackChunkName: "user" */ '../views/editor/index.vue'),
+        meta: {
+          // icon: 'el-icon-edit-outline',
+          title: 'editor',
+          showLink: false,
+          savedPosition: true
+        }
+      },
+    ],
+    meta: {
+      icon: 'el-icon-edit-outline',
+      title: 'editor',
+      showLink: true,
+      savedPosition: true
+    }
+  },
   {
     path: '/error',
     name: 'error',

src/views/editor/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div ref="editor"></div>
+    <div :innerHTML="content.html"></div>
+  </div>
+</template>
+
+<script>
+import { onMounted, onBeforeUnmount, ref, reactive } from 'vue'
+import WangEditor from 'wangeditor'
+
+export default {
+  name: 'editor',
+  setup() {
+    const editor = ref()
+    const content = reactive({
+      html: '',
+      text: '',
+    })
+
+    let instance
+    onMounted(() => {
+      instance = new WangEditor(editor.value)
+      Object.assign(instance.config, {
+        onchange() {
+          content.html = instance.txt.html()
+        },
+      })
+      instance.create()
+    })
+
+    onBeforeUnmount(() => {
+      instance.destroy()
+      instance = null
+    })
+
+    return {
+      editor,
+      content,
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.w-e-text-container) {
+  z-index: 999 !important;
+}
+</style>