CKEditor4.4整合SprngMVC实现上传图片
本教程适合java任何框架[springMVC,Struts1-2]以及servlet,其他语言同样可以参照传递参数方式前言：ckeditorPHP版本是有个ckfinder插件管理图片库的，可是java版本却还是灰色的。
本人使用的是ckeditor最新版本4.4.7
CKEditor的编辑器工具栏中有一项“图片域”，该工具可以贴上图片地址来在文本编辑器中加入图片，但是默认没有图片上传。
一、去掉预览中的英语
预览中是用英语说明的，对于我们国人来说是没有意义的。我们需要把它改成我们国语或者清空。那么问题来了？我们该怎么改呢？
方法有两种：
1.修改image插件的源文件，打开ckeditor/plugins/image/dialogs/image.js，搜索“b.config.image_previewText”就能找到这段英语了，(b.config.image_previewText||'')单引号中的内容全删了
2.修改config.js配置文件，打开ckeditor/config.js, 在CKEDITOR.editorConfig = function(config) {….}中添加
config.image_previewText = '外联图片请直接输入图片地址。';//这里的内容自己可以定义。同样可以设置""空Ckeditor实际是有一个默认的图片上传控件的，首先打开ckeditor/config.js配置文件在CKEDITOR.editorConfig = function(config) {….}中添加
config.filebrowserImageUploadUrl = 'upload.do?type=Image';//提示这里的type=image表示开启的图片上传功能。Flash，file上传的默认控件打开配置方式相同只是type不同
/*
* config.filebrowserUploadUrl = 'upload.do?type=File';
* config.filebrowserImageUploadUrl = 'upload.do?type=Image';
* config.filebrowserFlashUploadUrl = 'upload.do?type=Flash';
*/
对应前面的图片我们不难看出现在已经有上传图片的控件了。
三、结合后台上传图片
根据ckeditor的官方api我们知道，配置上传图片的form表单的action需要在配置文件ckeditor/config.js中添加
config.filebrowserImageUploadUrl = 'upload.do?type=Image';//upload.do上传文件的请求url既然我们要上传图片到后端，我们首先得知道上传控件给我们定义的属性名分别是什么，那么我们打开火狐浏览器的firbug，随意点击一张图片点击上传：
这里我们可以看到通过get到后台的参数有
CKEditor值：editor
CKEditorFuncNum值：0
langCode值：zh-cn
type值：Image
这里我们又可以知道通过post我们传到后端的参数
Upload值：二进制的图片
既然我们知道了这些参数，那么我们在后端就知道怎么接受参数了。
SpringMVC接收参数方法：
import java.io.IOException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
/**
*
*
* 图片上传测试类
*/
@Controller
public class ImageUplodController {
@RequestMapping(value = "upload.do")
public Object uploadImage(MultipartFile upload, String CKEditorFuncNum) {
// upload即图片文件可直接转换成字节数组存数据库或其他云空间
try {
byte[] imageBytes = upload.getBytes();
} catch (IOException e) {
e.printStackTrace();
}
// 处理图片....返回一个图片的URL
// code......
// 最后返回一个URL给ckeditor;其中image/imagePath.png为image存后的路径；第一个参数来自前台的一个标志，第三个参数错误返回码
return "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum + ", 'image/imagePath.png', '');</script> ";
//这里返回的JavaScript代码为ckeditor API中回调函数要求返回格式
}
}
![import java.io.IOException; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.multipart.MultipartFile; /** * * * 图片上传测试类 */ @Controller public class ImageUplodController { @RequestMapping(value = "upload.do") public Object uploadImage(MultipartFile upload, String CKEditorFuncNum) { // upload即图片文件可直接转换成字节数组存数据库或其他云空间 try { byte[] imageBytes = upload.getBytes(); } catch (IOException e) { e.printStackTrace(); } // 处理图片....返回一个图片的URL // code...... // 最后返回一个URL给ckeditor;其中image/imagePath.png为image存后的路径；第一个参数来自前台的一个标志，第三个参数错误返回码 return "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", 'image/imagePath.png', '');</script> "; //这里返回的JavaScript代码为ckeditor API中回调函数要求返回格式 } }](https://cdn.leftso.com/assets/upload/2023-03/28/5de1fd1d186f4f26aaaae1bb2f6797fb.png)
地址：https://www.leftso.com/article/8.html