mp-ui-pc/src/components/WangEditor/index.vue

<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>