ckEditor5踩坑（2）

1.上传图片（使用自定义上传适配器的js文件）

import {
  storage,
  createToken
} from '@/api/management.js'
import { Message } from 'element-ui'
import axios from 'axios'

export default class MyUploadAdapter {
  setApiToken(v) {
    this._apiToken = v
  }
  getApiToken() {
    return this._apiToken
  }

  constructor(loader, editor) {
    this.loader = loader
    this.editor = editor
    this.oldValue = editor.getData()
  }

  async upload() {
    let ls = await this._initRequest()
    console.log(ls)
    return ls
  }
  // Aborts the upload process.
  abort() {
    // console.log(cancel)
    let token = this.getApiToken()
    this.cancel = true
    if (token) {
      console.log('取消上传', token)
      token.cancel('取消上传')
    }
    // if (typeof cancel === 'function') {
    //   // console.log(88)
    //   // 取消请求
    //   let res = cancel()
    //   console.log(res)
    // }
  }
  // Initializes the XMLHttpRequest object using the URL passed to the constructor.
  _initRequest() {
    return new Promise(async (resolve, reject) => {
      this.cancel = false
      let fileInfo = {}
      fileInfo = await this.loader.file
      // 限制格式
      const fileSuffix = fileInfo.name.substring(fileInfo.name.lastIndexOf('.') + 1)
      /* eslint-disable */
      if (['jpg','png','jpeg'].indexOf(fileSuffix) === -1) {
        Message({
          message: '上传格式错误，应为jpg,png,jpeg',
          type: 'warning'
        })
        this.editor.setData(this.oldValue)
        return false
      }
      /* eslint-enable */
      // 限制大小
      const tooLong = fileInfo.size / 1024 > 2048
      if (tooLong) {
        Message({
          message: '上传文件大小不能超过 ' + (2048 / 1024) + 'MB!',
          type: 'warning'
        })
        this.editor.setData(this.oldValue)
        return false
      }
      let fileInputObj = {}
      fileInputObj.bucket = 'img'
      fileInputObj.name = fileInfo.name
      fileInputObj.size = fileInfo.size
      fileInputObj.userName = ''
      fileInputObj.password = ''
      let res = await createToken(fileInputObj)
      if (res.data.code === 200 && !this.cancel) {
        let uploadToken = res.data.msg
        const fileObj = fileInfo
        // // FormData 对象
        const form = new FormData()
        // // 文件对象
        form.append('files', fileObj)
        let apiToken = axios.CancelToken.source()
        this.setApiToken(apiToken)
        console.log('upload', apiToken)
        storage(form, {
          ossToken: uploadToken
        }, apiToken.token).then(res => {
          if (res.data.code === 200) {
            let ossUrl = process.env.VUE_APP_HTTP_OSS.split(':')
            resolve({
              default: ossUrl[0] + ':' + ossUrl[1] + ':8329/upload/' + res.data.msg
            })
          }
        }).catch(function(thrown) {
          console.log(333, thrown)
          Message({
            message: '上传已取消',
            type: 'error'
          })
          // reject(new Error())
          // reject('出错了')
          // if (axios.isCancel(thrown)) {
          //   console.log('Request canceled', thrown.message)
          // } else {
          //   // handle error
          // }
        })
      }
    })
  }
}

export let MyCustomUploadAdapterPlugin = (editor) => {
  editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
    return new MyUploadAdapter(loader, editor)
  }
}

2.使用适配器

import { MyCustomUploadAdapterPlugin } from 'ckUploadAdapter.js'
const config = {
  extraPlugins: [MyCustomUploadAdapterPlugin]
}