新增wangEditor组件

package-lock.json

@@ -1118,6 +1118,15 @@
         "regenerator-runtime": "^0.13.4"
       }
     },
+    "@babel/runtime-corejs3": {
+      "version": "7.17.9",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.17.9.tgz",
+      "integrity": "sha512-WxYHHUWF2uZ7Hp1K+D1xQgbgkGUfA+5UPOegEXGt2Y5SMog/rYCVaifLZDbw8UkNXozEqqrZTy6bglL7xTaCOw==",
+      "requires": {
+        "core-js-pure": "^3.20.2",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@babel/template": {
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
@@ -4020,6 +4029,11 @@
         }
       }
     },
+    "core-js-pure": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmmirror.com/core-js-pure/-/core-js-pure-3.22.0.tgz",
+      "integrity": "sha512-ylOC9nVy0ak1N+fPIZj00umoZHgUVqmucklP5RT5N+vJof38klKn8Ze6KGyvchdClvEBr6LcQqJpI216LUMqYA=="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -12879,6 +12893,23 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz",
       "integrity": "sha512-W74OO2vCJPs9/YjNjW8lLbj+jzT24waTo2KShI8jLvJW8OaIkgb3wuAMA7D+ZiUxDOx3ubwSZTaJBip9G8a3aQ=="
     },
+    "wangeditor": {
+      "version": "4.7.15",
+      "resolved": "https://registry.npmmirror.com/wangeditor/-/wangeditor-4.7.15.tgz",
+      "integrity": "sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "@babel/runtime-corejs3": "^7.11.2",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+        }
+      }
+    },
     "watch-size": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/watch-size/-/watch-size-2.0.0.tgz",

package.json

@@ -72,7 +72,8 @@
     "vue-moment": "^4.0.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "wangeditor": "^4.7.15"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/components/WangEditor/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div id="editor"></div>
+  </div>
+</template>
+<script>
+import wangEditor from "wangeditor";
+import { getToken } from "@/utils/auth";
+import { publicFileSaveAPI } from "@/api/common";
+import { publicFileGetUrl } from "@/api/common";
+export default {
+  name: "WangEditor",
+  props: {
+    value: {
+      default: "",
+      type: String,
+    },
+  },
+  data() {
+    return {
+      editor: null,
+    };
+  },
+  watch: {
+    value: "getdictionarylist", // 渲染数据的方法
+  },
+  methods: {
+    initEditor() {
+      this.editor = new wangEditor(`#editor`);
+      // 配置 onchange 回调函数，将数据同步到 提交表单 中
+      this.editor.config.onchange = (newHtml) => {
+        this.$emit("input", newHtml);
+      };
+      this.editor.config.placeholder = "请输入回答";
+      // 编辑器不需要的菜单
+      this.editor.config.excludeMenus = ["emoticon", "video", "code"];
+      this.editor.config.showLinkImg = false; //关闭网络路径图片方式
+      this.editor.config.customUploadImg = async (files, insert) => {
+        for (let item of files) {
+          let res = await publicFileSaveAPI(
+            { file: item },
+            {
+              Authorization: "Bearer " + getToken(),
+              "x-zz-timestamp": new Date().valueOf(),
+            }
+          );
+          let url = publicFileGetUrl + res.data.fileName;
+          // 在编辑器插入图片
+          insert(url);
+        }
+      };
+      this.editor.config.zIndex = 0;
+      // 创建编辑器
+      this.editor.create();
+    },
+
+    setContent(val) {
+      this.editor.txt.html(val);
+    },
+
+    getdictionarylist() {
+      // this.editor.txt.html(this.value);
+    },
+  },
+  mounted() {
+    this.initEditor();
+  },
+  beforeDestroy() {
+    // 销毁编辑器
+    this.editor.destroy();
+    this.editor = null;
+  },
+};
+</script>
+<style>
+</style>