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

位置:首页>文章>详情   分类: 教程分享 > Java教程   阅读(1641)   2024-03-11 19:26:37

本教程适合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中回调函数要求返回格式
	}

}
地址:https://www.leftso.com/article/8.html

相关阅读

CKEditor4.4整合SprngMVC实现上传图片
SpringMVC框架是一个java里面非常轻量级的mvc框架之一,与spring框架同源,整合方便快捷.
[JAVA]_图文详解CKeditor4.4.X版本添加程序代码高亮插件codesnippet,ckeditor
springmvc集成logback不打印spring mvc启动日志解决
CKeditor 5.0 如何获取纯文本数据,ckeditor官方其实提供了获取带html脚本的内容方法,只需要配合jQuery简单就获取到了文本内容,详细操作如下
ckeditor绑定keyup/keydown等事件实现一些功能,比如实时保存$(function(){//1编辑器初始化$('textarea#blog_content').ckeditor();
本文章主要简单讲解目前流行的springMVC4+Spring4+Mybaties3(即SSM)框架整合
本文主要讲解一种方式解决ckeditor编辑器上传的图片时候会添加一个默认的图片的宽高等style属性