ckEditor5 圖片上傳到七牛雲

默認狀況下，ckeditor編輯器會把圖片上傳到一個固定的地址，可是出於某些考慮，咱們也須要把圖片上傳到第三方網站進行處理。如下講解一下如何把圖片上傳到七牛雲CDN。

準備工做

首先須要去申請七牛的帳號和服務，而後經過七牛的jssdk上傳圖片。申請步驟略過，能夠自行去七牛官網查看。

1. 安裝七牛jssdk

npm i qiniu-js -S

1. 配置上傳方法

// 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();
    }
  }
}

1. 配置和使用插件

extraPlugins 接收一個插件方法數組，使用方法以下：

import UploadAdapter from './uploadAdapter.js';

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

經過以上的配置，就能夠在ckeditor5裏面，上傳文件到七牛雲CDN了。