[vue] wangEditor Web 富文本编辑器上传图片 蒙版

基本

<template>
  <div>
    <Toolbar  class="editor-toolbar" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      class="editor-container"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
      @onDestroyed="onDestroyed"
      @onMaxLength="onMaxLength"
      @onFocus="onFocus"
      @onBlur="onBlur"
      @customAlert="customAlert"
      @customPaste="customPaste"
    />
  </div>
</template>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
.editor-toolbar {
  border-bottom: 1px solid #e8e8e8;
  position: relative;
  .exportBtn{
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
.editor-container {
}
</style>

<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import FileSaver from "file-saver";
import htmlDocx from "html-docx-js/dist/html-docx";

export default Vue.extend({
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容...", scroll: true },
      mode: "default", // or 'simple'
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor) {
      console.log("onChange", editor.children);
      console.log(this.html);
    },
    onDestroyed(editor) {
      console.log("onDestroyed", editor);
    },
    onMaxLength(editor) {
      console.log("onMaxLength", editor);
    },
    onFocus(editor) {
      console.log("onFocus", editor);
    },
    onBlur(editor) {
      console.log("onBlur", editor);
    },
    customAlert(info, type) {
      window.alert(`customAlert in Vue demo\n${type}:\n${info}`);
    },
    customPaste(editor, event, callback) {
      console.log("ClipboardEvent 粘贴事件对象", event);
      // const html = event.clipboardData.getData('text/html'); // 获取粘贴的 html
      // const text = event.clipboardData.getData('text/plain'); // 获取粘贴的纯文本
      // const rtf = event.clipboardData.getData('text/rtf'); // 获取 rtf 数据（如从 word wsp 复制粘贴）

      // // 自定义插入内容
      // editor.insertText(text);

      // // 返回 false ，阻止默认粘贴行为
      // event.preventDefault();
      // callback(false); // 返回值（注意，vue 事件的返回值，不能用 return）

      // 返回 true ，继续默认的粘贴行为
      callback(true);
    },
    // 导出word文档
    exportWord() {
      const converted = htmlDocx.asBlob(this.html);
      FileSaver.saveAs(converted, "模块汇总表.docx");
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html =
        '<h1 style="text-align: center;">hello</h1>';
    }, 1500);
  },
  beforeDestroy() {
    const { editor } = this;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
});
</script>

上传图片

 editorConfig: {
        placeholder: '请输入内容...',
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
            customUpload: this.FileUploadImage,
          },
        },
      },

    FileUploadImage(file, insertFn) {
      // 通过FormData将文件转成二进制数据
      const formData = new FormData();
      // 将文件转二进制 file 即选中的文件
      formData.append('uploadFile', file);
      const paramsImg = {
        query: '',
        data: formData,
      };
      //上传图片的接口
      uploadImage(paramsImg).then((res) => {
        if (res.code === '00000') {
        // 图片的完整地址，可以直接在浏览器访问的
          const src =  res.data.src;
          insertFn(src, file.name, '');
        }
      });
    },

蒙版 mask

<div class="mask" :style="{ display: modalShow ? 'block' : 'none' }" />
<Toolbar
	:editor="editor"
	:defaultConfig="toolbarConfig"
	:mode="mode"
	ref="toolbar"
/>
<Editor
	class="editor-container"
	v-model="html"
	:defaultConfig="editorConfig"
	:mode="mode"
	@onCreated="onCreated"
	@onChange="onChange"
	@onDestroyed="onDestroyed"
	@onMaxLength="onMaxLength"
	@onFocus="onFocus"
	@onBlur="onBlur"
	@customAlert="customAlert"
	@customPaste="customPaste"
/>

  data() {
    return {
      modalShow: false,
      toolbarConfig: { modalAppendToBody: true }, // 将菜单弹出的 modal 添加到 body 下，可以不设
    };
  },

onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      // 监听所有监控弹出框
      this.editor.on('modalOrPanelShow', (modalOrPanel) => {
        // 因为下拉框也算弹出，所以要只对modal做遮罩，需要处理
        if (modalOrPanel.type !== 'modal') return;
        this.modalShow = true;
      });
      this.editor.on('modalOrPanelHide', () => {
        // 隐藏蒙层
        this.modalShow = false;
      });
    },

.w-e-modal {
  position: absolute;
  top: 50%  !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
.mask {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

参考：

官方文档

视频

demo实例

vue2 wangEditor富文本编辑器自定义上传图片