vue3开发2：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（二）

书接上文
这里我们讲一下在vue3中
ckeditor5编辑器的自定义图片上传，图片编辑功能

自定义图片上传

ckeditor5上传其实也有好几种方式，但是由于公司业务需求，需要带token在上传的请求中，所以只能使用自定义图片上传。（这里是直接上传服务器，而不是保存后上传）

1. 新建一个uploadImg.js

import axios from 'axios'


export default class MyUploadAdapter {
    constructor( loader ) {
      // Save Loader instance to update upload progress.
      this.loader = loader;
    }
   
    async upload() {
      const data = new FormData();
    //   data.append('typeOption', 'upload_image');
      data.append('files', await this.loader.file);
   
      return new Promise((resolve, reject) => {
        axios({
          url: `请求地址`,
          method: 'post',
          data,
          headers: {
            'token': token // 此处为你定义的token 值(Bearer token 接口认证方式)
          },
          withCredentials: true // true 为不允许带 token, false 为允许，可能会遇到跨域报错：Error: Network Error 弹窗提示
        }).then(res => {
            console.log(res)
          var resData = {}
          resData.default = res.url
          //注意这里的resData一定要是一个对象，而且外面一定要有一个default设置为图片上传后的url，这是ckeditor的规定格式
          resolve(resData);
        }).catch(error => {
          reject(error)
        });
      });
    }
  }

2. 在editBox中设置适配器

import MyUploadAdapter from "./uploadImg";

const initCKEditor = () => {
    CKEditor.create(document.querySelector("#editor"), {
      language: "zh-cn",
    })
      .then((editor) => {
        const toolbarContainer = document.querySelector("#toolbar-container");
        toolbarContainer.appendChild(editor.ui.view.toolbar.element);
        editorObj = editor; //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
        
        //自定义图片上传
        editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
          return new MyUploadAdapter(loader); //自定义上传图片
        };
      })
      .catch((error) => {
        console.error(error);
      });

这时候自定义上传图片已经完成了
但是仔细一看，没有图片上传后没有编辑大小的功能

这就奇怪了，后来我百度了一下，发现是我们npm的版本中是有引入相关的依赖，但是在官方的npm包的时候没有使用到这个功能，所以我们得去官方的gitlab把源码下载下来，加上这个功能后打包，直接引入我们的项目中

1. 下载资源包（步骤省略）

2. 打开项目，安装依赖，找到该路径文件src\ckeditor.js
   
   把Imageresize引入
   
   下面也不要忘记

3. 然后我们build一下这个包，会生成一个build文件夹，这就是我们需要的东西（translations是语言包，可以只留下中文包）
   

4. 在项目中引入即可

import CKEditor from "./ckeditor5-build-decoupled-document";
import "./ckeditor5-build-decoupled-document/build/translations/zh-cn.js";