feat: add editor

package-lock.json

@@ -19,6 +19,23 @@
       "resolved": "http://192.168.250.101:4873/@babel%2fparser/-/parser-7.12.11.tgz",
       "integrity": "sha1-nONZW810vFxGaQXobFNbiyUBHnk="
     },
+    "@babel/runtime": {
+      "version": "7.13.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
+      "integrity": "sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/runtime-corejs3": {
+      "version": "7.13.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.13.10.tgz",
+      "integrity": "sha512-x/XYVQ1h684pp1mJwOV4CyvqZXqbc8CMsMGUnAbuc82ZCdv1U63w5RSUzgDSXQHG5Rps/kiksH6g2D5BuaKyXg==",
+      "requires": {
+        "core-js-pure": "^3.0.0",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@babel/types": {
       "version": "7.12.11",
       "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.12.11.tgz",
@@ -498,6 +515,11 @@
         "bluebird": "^3.7.2"
       }
     },
+    "core-js-pure": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.10.0.tgz",
+      "integrity": "sha512-CC582enhrFZStO4F8lGI7QL3SYx7/AIRc+IdSi3btrQGrVsTawo5K/crmKbRrQ+MOMhNX4v+PATn0k2NN6wI7A=="
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "http://192.168.250.101:4873/cssesc/-/cssesc-3.0.0.tgz",
@@ -1222,6 +1244,11 @@
         "picomatch": "^2.2.1"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+    },
     "resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "http://192.168.250.101:4873/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -1589,6 +1616,15 @@
       "resolved": "http://192.168.250.101:4873/vxe-table/-/vxe-table-4.0.7-beta.4.tgz",
       "integrity": "sha1-scanU3yNmioYybtEwqF0GNYAEok="
     },
+    "wangeditor": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/wangeditor/-/wangeditor-4.0.3.tgz",
+      "integrity": "sha512-07a4a+1HQx+9G/BhTBaX92DsDYMQDrczp3Te8psj0ZN0Awg0tImIOG8esNCE0rlGI3+gVk4u83C+F5LtS1P48A==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "@babel/runtime-corejs3": "^7.11.2"
+      }
+    },
     "xe-ajax": {
       "version": "4.0.5",
       "resolved": "http://192.168.250.101:4873/xe-ajax/-/xe-ajax-4.0.5.tgz",

package.json

@@ -32,6 +32,7 @@
     "vuedraggable": "^4.0.1",
     "vuex": "^4.0.0",
     "vxe-table": "^4.0.7-beta.4",
+    "wangeditor": "^4.0.3",
     "xe-ajax": "^4.0.5",
     "xe-utils": "^3.1.12",
     "xgplayer": "^2.18.3"

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>