yos_web/src/components/my-editor/Editor.vue

<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        :style="[{'height': height?height:'500px'},{'overflow-y': 'hidden'}]"
        v-model="html"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
    />
  </div>
</template>
<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
        return {
          editor: null,
          html: '',
          toolbarConfig: {
            isFullScreen:false
          },
          editorConfig: {
            placeholder: this.$t('请输入内容...'),
            MENU_CONF:{
              uploadImage: {
                customUpload:this.update
              },
              uploadVideo: {
                customUpload:this.update
              }
            }
          },
          mode: 'default', // or 'simple'
        }
    },
    props: ['id','content','disabled','height'],
    watch: {
      disabled (val) {
        val ? this.editor.disable() : this.editor.enable()
      }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        //自定义上传
        update(file,insertFn) {
          let filename = file.name.substr(0,file.name.indexOf('.'))
          let ext = file.name.substr(file.name.indexOf('.') + 1)
          //资源上传请求配置
          let uploadRequest = {
              "classname": "system.attachment.huawei.OBS",
              "method": "getFileName",
              "content": {
                  "filename": filename,
                  "filetype": ext,
                  "parentid": JSON.parse(sessionStorage.getItem('folderid')).appfolderid
              }
          }
          //申请上传地址
          this.$api.requested(uploadRequest).then( res => {
            let url = res.data.uploadurl
            let obsfilename = res.data.serialfilename
            let config = {
              headers:{'Content-Type':'application/octet-stream'}
            }
            //上传华为云
            this.$upload.hw_upload(url, file, config).then(res => {
              if(res.statusText == 'OK') {
                let param = {
                  "classname": "system.attachment.huawei.OBS",
                  "method": "uploadSuccess",
                  "content": {
                    "serialfilename": obsfilename
                  }
                }
                //上传成功反馈
                this.$api.requested(param).then( res => {
                  let result = res.data.attachmentids
                  let param = {
                    "classname": "system.attachment.Attachment",
                    "method": "createFileLink",
                    "content": {
                      "ownertable": "SAT_SHAREMATERIAL",
                      "ownerid": this.id,
                      "usetype": "richtext",
                      "attachmentids": result
                    }
                  }
                  this.$api.requested(param).then(res => {
                    if (res.msg != '成功') {
                      this.$notify({
                        title: this.$t('提示'),
                        message: this.$t('上传失败'),
                        type: 'error'
                      })
                    } else {
                      //插入富文本
                      insertFn(res.data[0].url,filename,res.data[0].url)
                    }
                  })
                })
              }

            })
          })
        }
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
          this.html = this.content
          this.disabled ? this.editor.disable() : this.editor.enable()
        }, 1000)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>