CKeditor4上传图片

前期提要：

山重水复疑无路，柳暗花明又一村。

看网上一堆东西，本来都打算让后端加接口了，结果给我发现了一个宝藏！

好了，开始写！原文链接我放最后了。

所属环境：

vue2   &   vue-cli  4.5.8   &  CKeditor 4

CKeditor4是同事下载的包，丢public里边了

操作流程：

1.引入CKeditor

前面一堆引入ck的流程，突然不想写了，这里直接丢原文链接，去对着看一下吧，下面我只写Request 和 Response      我是咋整的。

原文链接：https://www.jianshu.com/p/51b60d789ba8/

或者自己找找怎么引入也行，这东西大多通用

2.hidden:!0   改成   hidden:false

这东西网上都有，这里我用原作者图了，主要用途就是  隐藏  浏览服务器  按钮  ，不过我没用到，可能是我版本高了亿点……

 3.上传时，修改地址与参数

A.首先在ckeditor的config,js内配置上传地址

config.extraPlugins = 'uploadimage'
config.filebrowserImageUploadUrl = "/common/api/v1/file/upload";//上传图片的地址

  我没写前面的协议&IP地址，是因为我在vue.config.js内配置过，如下：

  遇到   /api 就会自动补全地址

proxy: {
  '/api': {
    target: 'http://192.168.0.10:8081',
    changeOrigin: true, //是否开启跨域
  },
  '/file': {
    target: 'http://192.168.0.10:8081',
    changeOrigin: true, //是否开启跨域
  }
}

4.上传图片请求

// 渲染编辑器
THIS.ckeditor = window.CKEDITOR.replace(THIS.id);

// 向后台发起请求
THIS.ckeditor.on('fileUploadRequest', function( evt ) {
    // // Prevented the default behavior.

    var fileLoader = evt.data.fileLoader;
    let formData = new FormData();
    let xhr = fileLoader.xhr;

    xhr.open( 'POST', fileLoader.uploadUrl, true );
    formData.append( 'multipartFile', fileLoader.file);
    fileLoader.xhr.send( formData );

    // Prevented the default behavior.
    evt.stop();
    
});

5.接收返回值并填入URL框

// 返回
THIS.ckeditor.on('fileUploadResponse', function( evt ) {
    evt.stop();

    var data = evt.data;
    let xhr = data.fileLoader.xhr;
    let response = xhr.responseText;
    let imgUrl = JSON.parse(response).data;
    if(!imgUrl){
        data.message = imgUrl   // 这是失败alert提示信息
        evt.cancel();
    }else{
        data.url = imgUrl   // 返回到“图像信息”那里的URL框里面
    }
    // data.message = imgUrl
});

拖了10多天才写完，ε=(´ο｀*)))唉

原文链接：https://www.jianshu.com/p/51b60d789ba8/