ylrz_his_scrm_companyUI/src/components/Editor/wang.vue

<template>  
    <div>
      <div  ref='editor1' class="myedit"></div>
    </div> 
</template>  
  
<script>  
  import E from 'wangeditor'  
  export default {  
    name: 'editoritem',  
    data() {  
      return {
        uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadWang",
        editor: null
      }  
    },
    created() {
       
      
    },
    beforeDestroy() {
      // 销毁编辑器
      if(this.editor!=null){
        this.editor.destroy()
        this.editor = null
      }
      
    },
    methods:{
      initEditor(){
        var that=this;
        if(this.editor==null){
            //创建编辑器
            this.editor = new E(that.$refs.editor1 )
            this.editor.config.uploadImgServer = this.uploadUrl;
            this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
            this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
            this.editor.config.uploadFileName = 'fileName'
            this.editor.config.zIndex = 1
            this.editor.config.menus = [
              'head',
              'bold',
              'fontSize',
              'fontName',
              'italic',
              'underline',
              'strikeThrough',
              'indent',
              'lineHeight',
              'foreColor',
              'backColor',
              'link',
              'list',
              'todo',
              'justify',
              'quote',
              'emoticon',
              'image',
              // 'video',
              'table',
              'code',
              'splitLine',
              'undo',
              'redo',
          ]
          this.editor.config.onchange = function (newHtml) {
            console.log(newHtml)
            that.$emit("on-text-change", newHtml);
          }
          this.editor.config.pasteFilterStyle = false
          // 配置触发 onchange 的时间频率，默认为 200ms
          this.editor.config.onchangeTimeout = 500 // 修改为 500ms
            this.editor.config.uploadImgHooks = {
                // 上传图片之前
                before: function(xhr) {
                    //console.log(xhr)
                    
                },
                // 图片上传并返回了结果，图片插入已成功
                success: function(xhr) {
                    //console.log('success', xhr)
                },
                // 图片上传并返回了结果，但图片插入时出错了
                fail: function(xhr, editor, resData) {
                    console.log('fail', resData)
                },
                // 上传图片出错，一般为 http 请求的错误
                error: function(xhr, editor, resData) {
                    console.log('error', xhr, resData)
                },
                // 上传图片超时
                timeout: function(xhr) {
                    //console.log('timeout')
                },
                // 图片上传并返回了结果，想要自己把图片插入到编辑器中
                // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
                customInsert: function(insertImg, result, editor) {
                      console.log(result);
                      // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                      // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                      // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                      var url =   result.data[0].url
                      console.log(url);
                      insertImg(url)
                      // result 必须是一个 JSON 格式字符串！！！否则报错
                }
            }
            this.editor.create()
        }
        this.editor.txt.html("");
      },
      setText(text){
        if(this.editor==null){
          this.initEditor()
        }
        if(text==undefined||text==null){
          this.editor.txt.html("");
        }
        else{
          this.editor.txt.html(text);
        }
        
      },
     }
   
  }  
</script>  
  
<style scoped>
.toolbar {
  border: 1px solid #ccc;
}
.myedit {
  min-height: 300px;
  z-index: 1 !important;
}
.w-e-toolbar{
  z-index: 1 !important;
}
.w-e-text-container{
  z-index: 1 !important;
}
 
</style>