wangEditor富文本组件

<template>
  <div class="EditorClass" >
    <Toolbar ref="Toolbar" style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor 
      :style="{height: tableTop, overflowY: 'scroll', zIndex: '12'}"
      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>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { getToken } from '@/utils/auth'
import { fileNewUpLoad } from '@/api/common'

const editorConfig={
    MENU_CONF:{},
    withCredentials:true,//定义该属性为ture表示允许跨域访问
    autofocus:false,
    scroll:false,
    placeholder: "请输入内容...",
    maxLength:20000,
    minLength:200,
};
editorConfig.MENU_CONF['uploadImage']={//向编辑器中上传图片或者粘贴图片时触发该方法
    fieldName:'file',
    server: process.env.VUE_APP_BASE_API + "/common/upload",//后台服务器地址
    maxFileSize: 10 * 1024 * 1024, //
    maxNumberOfFiles: 10,
    headers: {
      Authorization: getToken(),
    },
    allowedFileTypes: ['image/*'],
    timeout: 20 * 1000, // 5 秒
    async customUpload(file, insertFn) {
      const form = new FormData();
      form.append('file', file);
      fileNewUpLoad(form).then(res => {
        let { code, fileName,url, originalFilename, msg} = res;
        if (code == 200) {
          insertFn(url, originalFilename, fileName + originalFilename).then(dataList=>{
            console.log(dataList);
          }).catch((ee)=>{
            console.log(ee);
          })
        } else if (code == 413) {
          this.$message({
            type: 'success',
            message: msg,
          });
        }
      });
    },
};

editorConfig.MENU_CONF['uploadVideo']={//向编辑器中上传图片或者粘贴图片时触发该方法
    fieldName:'file',
    server: process.env.VUE_APP_BASE_API + "/common/upload",//后台服务器地址
    maxFileSize: 100 * 1024 * 1024, //
    maxNumberOfFiles: 3,
    allowedFileTypes: ['video/*'],
    // 跨域是否传递 cookie ，默认为 false
    withCredentials: true,
    // 超时时间，默认为 30 秒
    timeout: 15 * 1000, // 15 秒
    headers: {
      Authorization: getToken(),
    },
    async customUpload(file, insertFn) {
      const form = new FormData();
      form.append('file', file);
      fileNewUpLoad(form).then(res => {
        let { code, fileName,url, originalFilename,poster, msg} = res;
        if (code == 200) {
          insertFn(url, poster, fileName + originalFilename).then(dataList=>{
            console.log(dataList);
          }).catch((ee)=>{
            console.log(ee);
          })
        } else if (code == 413) {
          this.$message({
            type: 'success',
            message: msg,
          });
        }
      });
    },
    // allowedFileTypes: ['image/*'],
    // timeout: 20 * 1000, // 5 秒
};



export default Vue.extend({
  components: { Editor, Toolbar },
  props: {
    // 表头
    tableTop: {
      type: String,
      default() {
        return 'calc(100vh - 350px)';
      }
    }
  },
  data() {
    return {
      editor: null,
      html: "",
      htmlInfo: "",
      toolbarConfig: {},
      editorConfig: editorConfig,
      mode: "default", // or 'simple'
    };
  },
  mounted() {
    this.initFun()
  },
  methods: { 
    initFun(){
      // 删除 视频 表格工具
      this.toolbarConfig.excludeKeys = [
        // 菜单 key
        'editLink',
        'viewLink',
        'unLink',
        'insertVideo',
        'insertImage',
        'insertTable',
        "fullScreen",
      ]
    },
    onChange(editor) { 
      // editor.getElemsByType('image') // 所有图片
      // editor.dangerouslyInsertHtml(`<h1>标题</h1><p>文本 <b>加粗</b></p>`)
      // editor.setHtml('<p>hello</p>')
      // console.log(editor.getHtml());
      // editor.insertText('xxx')
    },
    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('xxx')

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

        // 返回 true ，继续默认的粘贴行为
        // callback(true)
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      // console.log(this.editor);
    // console.log(this.$refs.Toolbar.editor);
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss">
  .EditorClass{
    border: 1px solid #ccc;
    z-index: 12;
  }
 .w-e-text-container{
  height: auto !important; 
  overflow: hidden;
  }
  .w-e-max-length-info{
    position: absolute;
    bottom: 0;
  }
.w-e-full-screen-container{
    left: 200px !important; 
    right: 10px !important; 
    width: calc(100% - 200px) !important; 
  }
</style>

使用：

<WangEditor ref="wangEditor"></WangEditor>

import WangEditor from "./components/wangEditor.vue";
  components: {
    WangEditor,
  },

//初始化
    this.$nextTick(()=>{
         this.$refs.wangEditor.editor.setHtml('')
    })
//赋值
          this.$nextTick(()=>{
            if(this.isFinish && this.$refs.wangEditor && this.$refs.wangEditor.editor){
              this.$refs.wangEditor.editor.setHtml(response.data.content || '')
            }
          })