SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传

配置CKEDITOR

精简文件

  • 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可以只剩下en.js,zh.js,zh-cn.js

  • 图片上传时图像信息中的预览会显示一堆英文信息,会干扰预览。找到ckeditor/plugins/image/dialogs/image.js,搜索“d.config.image_previewText”就能找到这段鸟语了,(d.config.image_previewText||”)引号中的内容全删除。

配置上传路径

默认的插入图片对话框不显示上传选项

  

第一步:image.js文件搜索“upload”可以找到这一段 id:'Upload',hidden:true或id:"Upload",hidden:!0,将其改为false

  

第二步:打开config.js文件,加入下面一句话
config.filebrowserImageUploadUrl = "imageUpload.do"; //用于接收上传文件并处理的Servlet

处理上传的Controller

代码

@RequestMapping("/imageUpload.do")
public String imageUpload(@RequestParam("upload") MultipartFile file,
@RequestParam("CKEditorFuncNum") String CKEditorFuncNum,
HttpServletResponse response,
HttpServletRequest request) throws IOException {
System.out.println("有文件想要上传");
PrintWriter out = response.getWriter();
String name = null;
name = new String(file.getOriginalFilename().getBytes("iso-8859-1"), "UTF-8");
String uploadContentType = file.getContentType();
//处理文件后缀
String expandedName = "";
if (uploadContentType.equals("image/pjpeg")
|| uploadContentType.equals("image/jpeg")) {
// IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg
expandedName = ".jpg";
} else if (uploadContentType.equals("image/png")
|| uploadContentType.equals("image/x-png")) {
// IE6上传的png图片的headimageContentType是"image/x-png"
expandedName = ".png";
} else if (uploadContentType.equals("image/gif")) {
expandedName = ".gif";
} else if (uploadContentType.equals("image/bmp")) {
expandedName = ".bmp";
} else {
//文件格式不符合,返回错误信息
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",''," + "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");
out.println("</script>");
return null;
} //文件命名并保存到服务器
DateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
name = df.format(new Date()) +expandedName;
String DirectoryName =request.getContextPath()+"/tempImag";
System.out.println(DirectoryName);
try {
File file1 = new File(request.getServletContext().getRealPath("/tempImag"),name);
System.out.println(file1.getPath());
file.transferTo(file1);
} catch (Exception e) {
e.printStackTrace();
} String fileURL =request.getContextPath() + "/tempImag/"+name; // 返回"图像"选项卡和图像在服务器的地址并显示图片
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'" +fileURL+"','')");
out.println("</script>");
out.close();
return null;
}

SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传的更多相关文章

  1. springmvc学习笔记(10)-springmvc注解开发之商品改动功能

    springmvc学习笔记(10)-springmvc注解开发之商品改动功能 标签: springmvc springmvc学习笔记10-springmvc注解开发之商品改动功能 需求 开发mappe ...

  2. SpringMVC上传图片总结(1)---常规方法进行图片上传,使用了MultipartFile、MultipartHttpServletRequest

    原文地址:https://blog.csdn.net/chenchunlin526/article/details/70945877 SpringMVC上传图片总结(1)---常规方法进行图片上传,使 ...

  3. Thinkphp整合阿里云OSS图片上传实例

    Thinkphp3.2整合阿里云OSS图片上传实例,图片上传至OSS可减少服务器压力,节省宽带,安全又稳定,阿里云OSS对于做负载均衡非常方便,不用传到各个服务器了 首先引入阿里云OSS类库 < ...

  4. SpringBoot整合Fastdfs,实现图片上传(IDEA)

    我们部署Fastdfs,就是为了实现文件的上传. 现在使用idea整合Fastdfs,实现图片上传 部署环境:Centos7部署分布式文件存储(Fastdfs) 利用Java客户端调用FastDFS ...

  5. struts2整合CKEditor和CKFinder实现上传

    上一篇文章给大家分享了CKEditor+CKFinder+JSP实现了在线编辑器上传图片的功能,这里在给大家分享一下如何在前面的基础上在struts2下实现这样的功能. 实现与Struts2的整合,整 ...

  6. jsp中如何整合CKEditor+CKFinder实现文件上传

    最近笔者做了一个新闻发布平台,放弃了之前的FCKEditor编辑器,使用了CKEditor+CKFinder,虽然免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人 ...

  7. 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

    前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...

  8. WINDOW.PARENT.CKEDITOR.TOOLS.CALLFUNCTION 图片上传

    CKEDITOR  编辑器   图片上传 WINDOW.PARENT.CKEDITOR.TOOLS.CALLFUNCTION (CKEditorFuncNum,图片路径,返回信息); CKEditor ...

  9. CKEditor 自主控制图片上传

    在ASP.NET中使用CKEditor编辑器,如果想控制图片上传,即把上传的图片路径名存到数据中,可以自定义一个上传功能 首先自定义CKEditor的配置文件 在config.js中添加以下代码,红色 ...

随机推荐

  1. CentOS sendmail安装及邮件域名配置

    http://www.centoscn.com/CentosServer/lighttpd/2013/0726/650.html sendmail是Linux下优秀的邮件系统.在不做任何设定的情况下, ...

  2. CentOS环境下yum安装LAMP

    第一步:更新系统内核 yum -y update 如果执行失败报错,可以执行修复命令:rpm –import /etc/pki/rpm-gpg/RPM-GPG-KEY* 第二步: 安装Apahce.M ...

  3. Yarn源码分析之MapReduce作业中任务Task调度整体流程(一)

    v2版本的MapReduce作业中,作业JOB_SETUP_COMPLETED事件的发生,即作业SETUP阶段完成事件,会触发作业由SETUP状态转换到RUNNING状态,而作业状态转换中涉及作业信息 ...

  4. virtualBox centos 6.x不能联网

    sudo vim /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 TYPE=Ethernet UUID=3323da63---89bb-92 ...

  5. Spring MVC参数方法名称解析器

    以下示例显示如何使用Spring Web MVC框架来实现多动作控制器的参数方法名称解析器. MultiActionController类可在单个控制器中分别映射多个URL到对应的方法. 所下所示配置 ...

  6. jQuery CSS 操作函数

    CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. offset() 返回第一个匹配元素相对于文档的位置. offsetParent() 返回 ...

  7. python 字符串格式化 ( 百分号 & format )

    Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存. ----百分号 tpl = ...

  8. Python Theano ValueError: y_i value out of bounds

    参考 https://groups.google.com/forum/#!topic/theano-users/tY3fNAPYd9k 这个问题是由于outs的数量没有设置对. 里面写到 “excep ...

  9. Linq to SQL 语法查询(子查询 & in操作 & join )

    var 子查询 = from c in ctx.Customers                    where                        (from o in ctx.Ord ...

  10. ios [__NSCFNumber isEqualToString:]: unrecognized selector sent to instance 0x7a97d4c0'报错

    今天接口由get换成post,我去改进行登录但出现了这个错误,首先出错先看能不能与服务器交互,能不能获得数据,其次,获得的数据是不是你想要的,记住,首先出错要想到是自己的问题,还有就是程序崩了要学会自 ...