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

位置:首页>文章>详情   分类: 教程分享 > Java教程   阅读(1224)   2023-03-28 11:29:14
本教程适合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到后台的参数有
这里我们可以看到通过get到后台的参数有
CKEditor值:editor
CKEditorFuncNum值:0
langCode值:zh-cn
type值:Image
这里我们又可以知道通过post我们传到后端的参数
这里我们又可以知道通过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://www.leftso.com/article/8.html

相关阅读

CKEditor4.4整合SprngMVC实现上传图片
SpringMVC框架是一个java里面非常轻量级的mvc框架之一,与spring框架同源,整合方便快捷.
[JAVA]_图文详解CKeditor4.4.X版本添加程序代码高亮插件codesnippet,ckeditor
CKeditor 5.0 如何获取纯文本数据
springmvc集成logback不打印spring mvc启动日志解决
本文章主要简单讲解目前流行的springMVC4+Spring4+Mybaties3(即SSM)框架整合
本文主要讲解一种方式解决ckeditor编辑器上传的图片时候会添加一个默认的图片的宽高等style属性
Java编程中spring mvc 获取请求ip,springmvc 获取访问ip