ckEditor5 图片上传到七牛云

默认情况下，ckeditor编辑器会把图片上传到一个固定的地址，但是出于某些考虑，我们也需要把图片上传到第三方网站进行处理。以下讲解一下如何把图片上传到七牛云CDN。

准备工作

首先需要去申请七牛的账号和服务，然后通过七牛的jssdk上传图片。申请步骤略过，可以自行去七牛官网查看。

1. 安装七牛jssdk

npm i qiniu-js -S

2. 配置上传方法

// upload.js

import axios from 'axios';
import * as qiniu from 'qiniu-js';

const cache = {};

// 从服务器获取token
async function getUploadToken() {
  try {
    if(cache.qiniu_token) {
      return cache.qiniu_token
    }
    const { data } = await axios.get('/qiniu_token')
    cache.qiniu_token = data.token
    return data.token
  } catch (error) {
    return Promise.reject(error);
  }
}

// 上传文件到七牛
export default async function upload(file) {
  // 用时间戳作为文件名
  const time = new Date().getTime();
  const token = await getUploadToken();
  return qiniu.upload(file, time, token, {
    fname: time
  })
}

编写图片上传插件

ckeditor5为图片上传提供了专门的方法，只需要实现该方法，就可以替换默认的图片上传，从而达到自定义上传的目的。

1. 编写插件

插件的名字可以固定，但是需要实现upload和abort两个方法

// uploadAdapter.js

import qiniuUpload from './upload.js';

export default class UploadAdapter {
  constructor(loader) {
    this.loader = loader;
    this.uploader = null;
  }
  // 通过这个方法，会把上传到服务器的文件地址展示到编辑器中
  async upload() {
    const file = await this.loader.file;
    this.uploader = await qiniuUpload(file)
    return new Promise((resolve, reject)=>{
      this.uploader.subscribe(data=>{
      }, error=>{
        console.error(error)
        return reject(error);
      }, data => {
        return resolve({
          default: 你的服务器地址 + data.key,
        })
      }) 
    })
  }
  // 这个方法会在编辑器销毁时候，终止文件上传
  abort() {
    if(this.uploader) {
      this.uploader.unsubscribe();
    }
  }
}

2. 配置和使用插件

extraPlugins 接收一个插件方法数组，使用方法如下：

import UploadAdapter from './uploadAdapter.js';

ClassicEditor.create( dom , {
  extraPlugins: [ uploadAdapterPlugin ],
})
function uploadAdapterPlugin( editor ) {
  editor.plugins.get('FileRepository').createUploadAdapter = new UploadAdapter
}

通过以上的配置，就可以在ckeditor5里面，上传文件到七牛云CDN了。