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/