ueditor.vue

<template>
   <div>
    <vue-ueditor-wrap  
      v-model="msg" 
      :config="editorConfig"
      @beforeInit="addImageButton"
    ></vue-ueditor-wrap>
    <a-modal
      title="上传图片"
      :visible="ifShowUploadImgDialog"
      @cancel="ifShowUploadImgDialog = false"
    >
      <a-form-model style="display: flex" >
        <a-form-item style="display: flex">
            <template slot="label">
                <span style="font-size: 14px;color: #595959;">图片</span>
            </template>
            <a-upload
               :show-upload-list="false"
              :customRequest="customRequestImg"
              :multiple="false"
              list-type="picture-card"
            >
              <img v-if="apiDataUrl" style="width: 102px;height:102px;object-fit:cover;" :src="apiDataUrl" alt="avatar" />
              <div v-else> 
                <a-icon type="plus" />
                <div class="ant-upload-text">
                  上传图片
                </div>
              </div>
           </a-upload>
        </a-form-item>
        <div  style="margin-left: 100px;">
            <a-form-item  style="display: flex">
              <template slot="label">
                  <span style="font-size: 14px;color: #595959;">宽</span>
              </template>
              <a-input-number :min="0" addon-after="px" v-model="file.w"/>
          </a-form-item>
          <a-form-item style="display: flex">
              <template slot="label">
                  <span style="font-size: 14px;color: #595959;">高</span>
              </template>
              <a-input-number  :min="0"  v-model="file.h">
              </a-input-number>
          </a-form-item>
        </div>
      </a-form-model>
      <template template slot="footer">
            <a-button type="default" @click="ifShowUploadImgDialog = false">取消</a-button>
            <a-button type="primary" @click="sureUpImgFn">确定</a-button>
      </template>
    </a-modal>
    <a-modal
      title="上传视频"
      width="520px"
      :visible="ifShowUploadVideoDialog"
      @cancel="ifShowUploadVideoDialog = false"
    >
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item >
            <template slot="label">
                <span style="font-size: 14px;color: #595959;">视频</span>
            </template>
            <a-upload
              accept=".mp4,.ogg,.webm" 
              :customRequest="customRequestVideo"
              :multiple="false"
            >
              <a-button> <a-icon type="upload" /> 上传视频 </a-button>
            </a-upload>
        </a-form-item>
        <a-form-item >
            <template slot="label">
                <span style="font-size: 14px;color: #595959;">宽</span>
            </template>
            <a-input-number :min="0" addon-after="px" v-model="file.w"/>
        </a-form-item>
        <a-form-item>
            <template slot="label">
                <span style="font-size: 14px;color: #595959;">高</span>
            </template>
            <a-input-number :min="0"  v-model="file.h">
            </a-input-number>
        </a-form-item>
      </a-form-model>
      <template template slot="footer">
            <a-button type="default" @click="ifShowUploadVideoDialog = false">取消</a-button>
            <a-button type="primary" @click="sureUpVideoFn">确定</a-button>
      </template>
    </a-modal>
   </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap';
import {
    
    uploadArticleOrVideo,uploadVideo} from '@/api/content/content.js';
export default {
    
    
  name: "MyEditor",
  props : ['ifDisabled','content','height'],
  data() {
    
    
    return {
    
    
        editorConfig: {
    
    
          autoHeightEnabled: false, //编译器不自动被内容撑高
          initialFrameHeight: 650, //初始容器高度
          initialFrameWith: "100%",
          readonly : false,
          UEDITOR_HOME_URL: "./UE/", //UEditor资源文件的存放路径
          allowDivTransToP: false,  // 阻止DIV 自动过滤为P标签
          // serverUrl: 'http://192.168.43.89:3000/ueconfig'  // //ueditor.szcloudplus.com/cos
        },
        msg : '',
        editorInstance : {
    
    },
        ifShowUploadImgDialog : false,
        ifShowUploadVideoDialog : false,
        editor : null,
        apiDataUrl : null,
        labelCol: {
    
     span: 5},
        wrapperCol: {
    
     span: 15 },
        file : {
    
    
          w : 100,
          h : 100
        }
    };
  },
  components : {
    
    
    VueUeditorWrap
  },
  watch : {
    
    
    content : {
    
    
      handler() {
    
    
        this.msg = this.content;
        
      },
      immediate:true
    },
    msg() {
    
    
      this.$emit('getEditContent',this.msg)
    }
  },
  methods : {
    
    
    readyFn(editorInstance) {
    
    
      this.editorInstance=editorInstance
    },
    addImageButton(editorId) {
    
    
      let that = this;
      window.UE.registerUI("autoimg", (editor, uname) => {
    
    
        const btnImg = new window.UE.ui.Button({
    
    
          name: 'my-img',
          title: '上传图片',
          onclick: function(){
    
    
            that.editor = editor;
            that.ifShowUploadImgDialog = true;
          }
        });
        return btnImg
      });
      window.UE.registerUI("autovideo", (editor, uname) => {
    
    
        const btnVideo = new window.UE.ui.Button({
    
    
          name: 'my-video',
          title: '上传视频',
          onclick: function(){
    
    
            that.editor = editor;
            that.ifShowUploadVideoDialog = true;
          }
        });
        return btnVideo
      });
    },
    customRequestImg(data) {
    
    
      const formData = new FormData();
      formData.append('file',data.file);
      uploadArticleOrVideo(formData).then(res=>{
    
    
          if(res.data.success) {
    
    
              this.apiDataUrl = window.customizeConfig.proposed === "NJ" ? window.customizeConfig.minioUrl + JSON.parse(res.data.data).url : 
              JSON.parse(res.data.data).url;
          } else {
    
    
              this.$message.error('上传失败')
          }
      })
    },
    customRequestVideo(data) {
    
    
      const formData = new FormData();
      formData.append('file',data.file);
      uploadVideo(formData).then(res=>{
    
    
          data.onSuccess(res, data.file);
          if(res.data.success) {
    
    
            this.apiDataUrl = window.customizeConfig.proposed === "NJ" ? window.customizeConfig.minioUrl + JSON.parse(res.data.data).url :
            JSON.parse(res.data.data).url;
          } else {
    
    
            this.$message.error('上传失败')
          }
      })
    },
    sureUpImgFn() {
    
    
      if(this.apiDataUrl) {
    
    
        this.editor.execCommand('insertimage', {
    
    
          src:this.apiDataUrl,
          _src: this.apiDataUrl,
          height : this.file.h,
          width : this.file.w
        });
        this.ifShowUploadImgDialog = false;
      } else {
    
    
        this.$message.warning("暂无上传文件")
      }
      
    },
    sureUpVideoFn() {
    
    
      if(this.apiDataUrl) {
    
    
        if(this.file.h && this.file.w) {
    
    
          this.editor.execCommand('insertHTML',`<video height=${
      
      this.file.h} width=${
      
      this.file.w} src="${
      
      this.apiDataUrl}" autoplay loop controls="controls"></video>`);
        } else {
    
    
          this.editor.execCommand('insertHTML',`<video src="${
      
      this.apiDataUrl}" autoplay loop controls="controls"></video>`);
        }
        this.ifShowUploadVideoDialog = false;
      } else {
    
    
        this.$message.warning("暂无上传文件")
      }
    }
  },
  created() {
    
    
    this.editorConfig.readonly = this.ifDisabled;
  }
};
</script>
<style>
  .tox-notifications-container {
    
    
      display: none;
  }
  .tox-statusbar {
    
    
    display: none !important;
  }
.edui-button.edui-for-my-img .edui-button-wrap .edui-button-body .edui-icon {
    
    
    background-image: url("~@/assets/img/ue/upImg.png") !important;
    background-size: contain;
}
.edui-button.edui-for-my-video .edui-button-wrap .edui-button-body .edui-icon {
    
    
    background-image: url("~@/assets/img/ue/upVideo.png") !important;
    background-size: contain;
}
textarea {
    
    
  display:none;
}
</style>