CKEditor4.4整合SprngMVC实现上传图片

教程分享 > WEB技术 > Web Editor (4493) 2024-08-07 11:24:34

本教程适合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实际是有一个默认的图片上传控件的，首先打开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

这里的upload.do即上传的action这里对于java的Struts框架还是springMVC框架都是公用的。配置好了这里我们继续回到界面；
既然我们要上传图片到后端，我们首先得知道上传控件给我们定义的属性名分别是什么，那么我们打开火狐浏览器的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中回调函数要求返回格式
	}

}