CKEDITOR 图片上传以及预览功能实现步骤:
1:下载ckeditor,解压,将整个目录复制到项目webapp下
2:在jsp中,添加以下代码
先导入ckeditor的js包,
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
然后添加textarea
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
CKEDITOR.replace( 'editor1', {
toolbar: 'Basic',
uiColor: '#9AB8F3'
});
</script>
3:图片上传功能暂时是屏蔽的,需要修改源代码
“预览”中有一大堆鸟语,看得很不爽。可以打开ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”就能找到这段鸟语了,(b.config.image_previewText||'')单引号中的内容全删了,注意别删多了。
还是ckeditor/plugins/image/dialogs/image.js这个文件,搜索“upload”可以找到这一段
id:'Upload',hidden:true
实际上上传功能被隐藏了,把上面的true改成false,再打开编辑器,就能找到上传功能了。
4:在ckeditor/config.js中添加上传图片的响应
var pathName = window.document.location.pathname;
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
config.filebrowserImageUploadUrl = projectName+"/image/upload"; //固定路径,这是上传的图片的action
在config.js添加以上几句话,就会将点击上传到服务器之后的响应传到controller之中。
5:controller配置
注意方法的返回值最好是void,刚开始我返回string类型的提示语,好像都返回不成功,具体原因未知,也许可能大概是out.println和方法的返回值冲突。
@RequestMapping("/upload")
@ResponseBody
public void processImageUpload(@ModelAttribute UploadFile file,HttpServletResponse response , MultipartFile upload,HttpServletRequest servletRequest,
StringCKEditorFuncNum)
要想接收到上传图片的内容,必须定义一个MultipartFile类型,名称必须为upload(也可以在ckeditor的js中修改上传的名称),同时用String类型接收CKEditorFuncNum(这个在返回数据时要用到)。
图片的重命名以及保存只给出关键代码:
String a = upload.getOriginalFilename();//获取图片的名称
String extracted = a.substring(a.lastIndexOf(".") + 1); //获取图片的后缀,可以进行判断是否为jpg等类型
Calendar calendar = GregorianCalendar.getInstance();
UUID uuid = UUID.randomUUID();
String newFileName = uuid + "." +extracted;
String name ="/img/"+calendar.get(Calendar.YEAR)+"-"+calendar.get(Calendar.MONTH);
String newName = "img/"+calendar.get(Calendar.YEAR)+"-"+calendar.get(Calendar.MONTH);
//返回给页面的路径,注意可以是相对路径,也可以是图片的URL。类似于'http://www.jb51.net/image.jpg
String logoPathDir = name;
String logoRealPathDir = servletRequest.getSession().getServletContext()
.getRealPath(logoPathDir);
//构建存储文件夹的具体路径,本例是F:\1\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\springmvcspringmybatis\img\2014-2。
File toFile = new File(logoRealPathDir, newFileName);
org.apache.commons.io.FileUtils.copyInputStreamToFile(upload.getInputStream(), toFile);//复制上传的文件到logoRealPathDir文件夹,并且命名为newFileName
最后返回一段JavaScript代码给前端,主要功能是给
箭头所指的URL赋值,这样就能在前端预览此图片了。具体代码如下:
response.setCharacterEncoding("GBK");
PrintWriter out = response.getWriter();
response.reset();
response.setContentType("text/html; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
//设置返回的格式之内
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'"+newName+"/"+newFileName+"',''" + ")");
//CKEditor 中返回图片设定页面.此处只适合单个文件上传,CallBack是回调时显示的位置,这个参数必须有,CallBack也就是在方法头部接收到的CKEditorFuncNum
newFileName也就是在前面复制文件具体路径的相对路径,在此处是img/2014-2/023a7be5-0d97-4120-98a2-4aad6b58b876.jpg
out.println("</script>");
大家也可以参照
http://blog.csdn.net/mydwr/article/details/8669594
单纯的ckeditor是可以上传图片的,但是使用ckeditor+ckfinder可能使用起来更方便,以后会写一下ckeditor和ckfinder的使用