下载依赖

"@wangeditor/editor": "^5.1.1",
"@wangeditor/editor-for-vue": "^1.0.1",

Editor子组件

editor.vue

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :style="styles"
      class="editor-wrapper"
      v-model="currentValue"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>

<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default Vue.extend({
  components: { Editor, Toolbar },
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: null,
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: null,
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    styles() {
      let style = {};
      if (this.minHeight) {
        style.minHeight = `${this.minHeight}px`;
      }
      if (this.height) {
        style.height = `${this.height}px`;
      }
      return style;
    },
  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          this.currentValue = val === null ? "" : val;
          if (this.editor) {
            this.editor.setHtml(val);
          }
        }
      },
      immediate: true,
      deep: true,
    },
    readOnly: {
      handler(val) {
        this.editorConfig.readOnly = val;
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      editor: null,
      currentValue: "",
      toolbarConfig: {
        excludeKeys: ["fullScreen", "group-video"],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        readOnly: this.readOnly,
        MENU_CONF: {
          uploadImage: {
            server: "/api/article/uploadDownFile",
            fieldName: "file",
            onSuccess(file, res) {},
            onFailed: (file, res) => {},
            //如果你的服务端 response body 无法按照上文规定的格式，则无法插入图片，提示失败。
            // 但你可以使用 customInsert 来自定义插入图片。
            customInsert: (res, insertFn) => {
              let url = "http://xxxxxxxx/"; // 图片上传路径 
              insertFn(url);
            },
          },
        },
      },
      mode: "default", // or 'simple'
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor) {
      this.$emit("change", editor.getHtml());
    },
  },
  mounted() {},
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
});
</script>
// 一定引入css样式文件
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
.editor-wrapper {
  text-align: left;
  overflow-y: hidden;
}
</style>

父组件使用

// 嵌套dialog中 所以有个handleClose函数 每次销毁弹框注销组件
<editor
  v-model="addForm.afficheContent"
  @change="getEditor"
  :height="300"
  :readOnly="readOnly"
  v-if="viewFlag"
/>
// 子组件返回值
getEditor(val) {
  this.addForm.afficheContent = val;
},
// 结束时回调
handleClose() {
  this.viewFlag = false;
},