ckeditor配置图片上传

Love The Way You Lie 2022-02-12 15:51 242阅读 0赞

ckeditor作为老牌的优秀在线编辑器，一直受到开发者的青睐。

这里我们讲解下 ckeditor最新版本4.7的图片上传配置。

[https://ckeditor.com/][https_ckeditor.com] 官方

进入下载 [https://ckeditor.com/download][https_ckeditor.com_download]

![QQ鎴浘20170820202125.jpg][QQ_20170820202125.jpg]

我们下载完整版

默认本地上传没有开启；

找到ckeditor/plugins/image/dialogs/image.js文件 打开

然后搜索 id:"Upload",hidden   默认值是!0 我们改成0即可

刷新页面，点击那个上传图片图标，

![QQ鎴浘20170820202625.jpg][QQ_20170820202625.jpg]

出现了上传；

然后我们配置下上传后台请求路径

找到ckeditor下的config.js 打开

config.filebrowserUploadUrl="/admin/film/ckeditorUpload";

配置下

后台处理有个callback参数CKEditorFuncNum我们要接收下 并且要返回

这里我下我项目里的参考实现 用的是springboot

<table> 
 <tbody> 
 <tr> 
 <td> <code>/**</code> <code>&nbsp;</code><code>*&nbsp;上传图片</code> <code>&nbsp;</code><code>*&nbsp;@param&nbsp;file</code> <code>&nbsp;</code><code>*&nbsp;@return</code> <code>&nbsp;</code><code>*/</code> <code>@ResponseBody</code> <code>@RequestMapping</code><code>(</code><code>"/ckeditorUpload"</code><code>)</code> <code>public</code>&nbsp;<code>String&nbsp;ckeditorUpload(</code><code>@RequestParam</code><code>(</code><code>"upload"</code><code>)MultipartFile&nbsp;file,String&nbsp;CKEditorFuncNum)</code><code>throws</code>&nbsp;<code>Exception{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//&nbsp;获取文件名</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>String&nbsp;fileName&nbsp;=&nbsp;file.getOriginalFilename();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//&nbsp;获取文件的后缀名</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>String&nbsp;suffixName&nbsp;=&nbsp;fileName.substring(fileName.lastIndexOf(</code><code>"."</code><code>));</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>String&nbsp;newFileName=DateUtil.getCurrentDateStr()+suffixName;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>FileUtils.copyInputStreamToFile(file.getInputStream(),&nbsp;</code><code>new</code>&nbsp;<code>File(imageFilePath+newFileName));</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>StringBuffer&nbsp;sb=</code><code>new</code>&nbsp;<code>StringBuffer();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>sb.append(</code><code>"&lt;script&nbsp;type=\"text/javascript\"&gt;"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>sb.append(</code><code>"window.parent.CKEDITOR.tools.callFunction("</code><code>+&nbsp;CKEditorFuncNum&nbsp;+&nbsp;</code><code>",'"</code>&nbsp;<code>+</code><code>"/static/filmImage/"</code><code>+&nbsp;newFileName&nbsp;+&nbsp;</code><code>"','')"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>sb.append(</code><code>"&lt;/script&gt;"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>sb.toString();</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

获取文件，重命名，搞到本地 然后返回ajax信息。

[https_ckeditor.com]: https://ckeditor.com/
[https_ckeditor.com_download]: https://ckeditor.com/download
[QQ_20170820202125.jpg]: /images/20220212/4e23ed8d69fa4db9aff6d9f3e6262e07.png
[QQ_20170820202625.jpg]: /images/20220212/bd70241a48204387b2c827eb3e446969.png