index.vue

<template>
  <div>
    <el-upload
      :show-file-list="false"
      :action="uploadUrl"
      style="display: none"
      ref="uploadimg"
      name="file"
      :on-success="handleAvatarSuccess"
      :headers="headers"
    >
    </el-upload>
  <div style="border:1px solid #ccc">
    <Toolbar
      :defaultConfig="Editors.toolbarConfig"
      :editor="Editors.editor"
      style="border-bottom: 1px solid #ccc"
    />
    <!-- 编辑器 -->
    <Editor
      ref="editor"
      v-model="Editors.html"
      :defaultConfig="Editors.editorConfig"
      style="height: 520px; overflow-y: hidden"
      @onChange="onChange"
      @onCreated="onCreated"
    />
  </div>

  </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getToken } from "@/utils/auth";

export default {
  name: "Editors",
  components: { Editor, Toolbar },
  props: {
    /* 编辑器的内容 */
    value: {
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: null,
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: null,
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false,
    },
    // 上传文件大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    /* 类型（base64格式、url格式） */
    type: {
      type: String,
      default: "url",
    }
  },
  data() {
    return {
      // 图片上传
      uploadImg: {
        urls: this.$urls,
        uploadUrl: this.$urls + '/common/upload',
        dialogVisible: false
      },
      // 富文本内容
      Editors: {
        editor: null,
        html: 'hellow',
        toolbarConfig: {},
        editorConfig: { placeholder: '请输入内容...', MENU_CONF: {} },
        mode: 'default' // or 'simple'},
      },

      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken()
      },
    };
  },
  computed: {

  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.Editors.html) {
          this.Editors.html = val === null ? "" : val;

        }
      },
      immediate: true,
    },

  },
  mounted() {

  },
  created() {
    var that=this
    this.Editors.editorConfig.MENU_CONF["uploadImage"] = {
      customBrowseAndUpload(insertFn) {
        // console.log(1)// JS 语法
        that.$refs.uploadimg.$children[0].$refs.input.click();
      }
    }
  },
  beforeDestroy() {
    const editor = this.Editors.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    // 图片上传成功
    handleAvatarSuccess(res, file) {
      // console.log(res,555)
      // this.uploadImg.dialogImageUrl = URL.createObjectURL(file.raw)
      // this.uploadImg.img = res.fileName
      // console.log(1)
      console.log( this.Editors.editor)
      let imgurl=process.env.VUE_APP_BASE_API+res.fileName

      console.log(imgurl,1)
      this.Editors.editor.dangerouslyInsertHtml(`<image src=${imgurl} />`)
    },
    // 接收富文本内容改变
    onCreated(editor) {
      console.log(editor)
      this.Editors.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor) {
      this.$emit('onChange',editor.getHtml())
      // console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
    },
    getEditorText() {
      const editor = this.Editors.editor
      if (editor == null) return
      // console.log(editor.getText()) // 执行 editor API
    },
    printEditorHtml() {
      const editor = this.Editors.editor
      if (editor == null) return
      // console.log(editor.getHtml()) // 执行 editor API
    },
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>