vue富文本

<div ref="editor" ></div>
import E from 'wangeditor'
editor: null,
editorContent:'',

  mounted() {
    // const that = this
    // window.onresize = function temp() {
    //   that.height = document.documentElement.clientHeight - 200 + 'px'
    // }
    const _this = this
    var editor = new E(this.$refs.editor)
    // 自定义菜单配置
    editor.customConfig.zIndex = 5
    // 文件上传
    editor.customConfig.customUploadImg = function(files, insert) {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法
      files.forEach(image => {
        upload(_this.imagesUploadApi, image).then(res => {
          const data = res.data
          insert(data)
          // const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
          // insert(url)
        })
      })
    }
    editor.customConfig.onchange = (html) => {
      this.editorContent = html
    }
    editor.create()
    // 初始化数据
    editor.txt.html(this.editorContent)
  },

getcommentNoReadCount(){
      commentNoReadCount().then(res => {
        this.msgnumber=res
      })
    },
    showClick() {//这里是解决dialog弹出层初始化失败的问题
      this.$nextTick(() => {
        this.initEditor()
      });
    },
    hideClick(){
      //  this.$refs.editor.innerHTML = ''
      // this.editor = null
      this.editor.txt.html(this.editorContent)
      location.reload()
    },
    initEditor() {
      if (this.editor ==null) {
        // setTimeout(()=>{
          const editor = new E(this.$refs.editor);
          editor.config.placeholder = this.placeholder;
          editor.config.height = this.height;

          // 限制类型
          // editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
          editor.config.uploadImgMaxLength = 1; // 一次最多上传 1 个图片

          // 配置菜单栏，删减菜单，调整顺序
          editor.config.menus = [
            'undo', // 撤销
            'redo', // 重复
            'head', // 标题
            'bold', // 粗体
            'fontSize', // 字号
            'fontName', // 字体
            'italic', // 斜体
            'underline', // 下划线
            'strikeThrough', // 删除线
            'indent', // 缩进
            'lineHeight', // 行高
            'foreColor', // 文字颜色
            'backColor', // 背景颜色
            'link', // 插入链接
            'list', // 列表
            'todo', // 待办
            'justify', // 对齐方式
            'quote', // 引用
            'emoticon',
            'image', // 插入图片
            'video', // 视频
            'table',  // 表格
            'code',  // 插入代码
            'splitLine', // 分割线
          ];

          // 监听数据变化
          editor.config.onchange = this.handleContentChange;
          // 自己实现上传图片
          editor.config.customUploadImg = this.handleUploadImage;

          // 创建编辑器
          editor.create();
          // 赋予初始值
          // editor.txt.html(this.value);
          editor.txt.html(this.form.content);


          this.editor = editor;
        // },1000)

      }
      
    },

  handleContentChange(newHtml) {
      this.$emit('change', newHtml);
      this.neirong=newHtml
      console.log("chakan", this.neirong)
      this.form.content=this.neirong
    },
    /**
     * resultFiles 是 input 中选中的文件列表
     * insertImgFn 是获取图片 url 后，插入到编辑器的方法
     */
    async handleUploadImage(resultFiles, insertImgFn) {
      // const imgUrl = await uploadImage(resultFiles[0]);
      // // 上传图片，返回结果，将图片插入到编辑器中
      // insertImgFn(imgUrl);
      upload('/api/alossContent', resultFiles[0]).then(res => {
      // upload(this.imagesUploadApi, resultFiles[0]).then(res => {
        console.log(res.data)
        insertImgFn(res.data);
      })
    },