Vue中使用wangEditor富文本

wangEditor官网：www.wangeditor.com/index.html

npm 安装 npm i wangeditor --save

<template>
    <div>
          <div
            class="content"
            ref="contentFrom"
          ></div>
    </div>
</template>

<script>
    import E from 'wangeditor'
    export default {
      data () {
        return {
          editorHtmlArr: '',
          editor:null
        }
      },
     mounted() {
       this.initEditor();
      },
  methods: {
       //富文本编辑器
       //data参数用于回显
    initEditor(data) {
      this.$nextTick(() => {
        let dom = this.$refs["contentFrom"];
        this.editor = new E(dom);
        /* 配置菜单栏 */
        this.editor.config.menus = [
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入图片
          'table', // 表格
          'video', // 插入视频
          'code', // 插入代码
          'undo', // 撤销
          'redo', // 重复
          'fullscreen' // 全屏
        ];
        //设置高度
        this.editor.config.height = 500;
        
        //设置提示语
        this.editor.config.placeholder = this.$t("email.placeholder");
        
        //上传图片时添加 http 请求的 header
        this.editor.config.uploadImgHeaders = {
          token: this.getToken,
          "X-XSRF-TOKEN": Cookies.get("XSRF-TOKEN"),
        };
        //限制一次最多能传几张图片/配置接口/
        this.editor.config.uploadImgMaxLength = 1;
        this.editor.config.uploadImgServer ="";
       //alert弹窗取消
        this.editor.config.customAlert = function (info) {
          console.log("info", info);
          // info 是需要提示的内容
        };
        // 回调函数
        this.editor.config.uploadImgHooks = {
         // 上传图片出错，一般为 http 请求的错误
         //  error: function (xhr, editor, resData) {
         //   this_.$notify.error({
         //     message: JSON.parse(xhr.response).errors,
         //   });
         // },
          customInsert: (insertImgFn, result) => {
            // result 即服务端返回的接口
            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            insertImgFn(result.url);
          },
        };
        
        let that = this;
        // 配置 onchange 回调函数
        this.editor.config.onchange = function (newHtml) {
          that.editorHtml(newHtml);
        };
        this.editor.config.uploadImgShowBase64 = true;
        //设置的内容写在create之前!!!!!!!!!!!!!!!
        this.editor.create();
      });
    }, 
    
    //富文本最新html
    editorHtml(html) {
      this.editorHtmlArr = html;
     // this.basicForm.summaryContent = this.editorHtmlArr;
    },    
  }
  
  //回显接口
  echo(){
   this.$nextTick(() => {
   //data 接口返回的富文本编辑器数据
     this.editor.txt.html(data); // 默认显示内容-回显 
   })
  },
  
  beforeDestroy() { 
 // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()    
    this.editor = null       
  }
 }
</script>



//和Dialog互相覆盖问题,可以通过修改z-index属性避免此现象    注意<style>标签不能有scoped。
<style>
.w-e-toolbar {
  z-index: 2 !important;
}
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
}
</style>