CKEditor用于富文本输入是极好的，它还有一些插件支持扩展功能，其中图片上传就是比较常用到的。本文简单记录我的实现步骤。

1.CKEditor除了提供三种标准版压缩包下载，还可根据自己的需求进行个性化打包下载。无论采取何种方式，从CKEditor官网下载带ImgUpload功能的压缩包，解压放在web工程resource目录下，例如我是放在：

webapp/resources/ckeditor

2.CKEditor配置文件（java）：

 import com.ckeditor.CKEditorConfig;

 import com.ckeditor.EventHandler;

 import com.ckeditor.GlobalEventHandler;

 public class CKEditorHelper

 {

     public static CKEditorConfig createConfig() {

         CKEditorConfig config = new CKEditorConfig();

         config.addConfigValue("filebrowserImageUploadUrl","uploadImg");//uploadImg是处理上传图片的url

         return config;

     }

     public static EventHandler createEventHandlers() {

         EventHandler handler = new EventHandler();

         return handler;

     }

     public static GlobalEventHandler createGlobalEventHandlers() {

         GlobalEventHandler handler = new GlobalEventHandler();

         return handler;

     }

 }

3.处理上传图片（java），随便写在一个controller里

@RequestMapping(value = "/uploadImg", method = RequestMethod.POST)

    public ModelAndView uploadImg(@RequestParam("upload") CommonsMultipartFile upload,

                                  String CKEditor,String CKEditorFuncNum,String langCode,

                                  HttpServletResponse response) {

//        System.out.println("-----file name is :" + file.getOriginalFilename());

        String currentFileName= String.valueOf(System.currentTimeMillis());

        String url="";

        if (!upload.isEmpty()) {

            String picId =  UtilDate.getID();

            try {

                FileHelper.saveImg(upload, picId);

            } catch (IOException e) {

                e.printStackTrace();

            }

            url="getImg?imgId="+picId;

        }

//        return "<script>window.opener.CKEDITOR.tools.callFunction( "+CKEditorFuncNum+", "+ url+" );</script>" ;

        String message = "成功上传图片"+upload.getOriginalFilename();

        try {

            response.setContentType("text/html; charset=gbk");

            PrintWriter out = response.getWriter();

            out.println("<html>");

            out.println("<script type=\"text/javascript\">");

            out.println("//<![CDATA[");

            String call = "window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'" + StringEscapeUtils.escapeJavaScript(url)

                    + "'" + (message != null ? ",'" + StringEscapeUtils.escapeJavaScript(message) + "'" : "") + ");";

            out.println(call);

            out.println("//]]>");

            out.println("</script>");

            out.println("</html>");

        } catch (Exception e) {

            e.printStackTrace();

        }

        return null;

    }

4.页面配置（jsp）：这里只列出关键代码。这段代码的意思是，将id="content"的textarea替换为ckeditor的输入框，其配置文件为CKEditorHelper，资源文件为resources/ckeditor/

注意：前两行代码放在<HTML>标签之前，其他随意

 <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>

 <%@ page import="CKEditorHelper" %>

 <form:textarea class="form-control" path="content" placeholder="内容" name="content" rows="5"/>

 <ckeditor:replace replace="content" basePath="resources/ckeditor/"

                   config="<%= CKEditorHelper.createConfig() %>"

                   events="<%= CKEditorHelper.createEventHandlers() %>"/>

 <script src="resources/ckeditor/ckeditor.js"></script>

ckeditor+jsp+spring配置图片上传的更多相关文章

  1. spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除，限制为图片代码等相关配置

    spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ ...

  2. CKEditor与dotnetcore实现图片上传

    CKEditor的使用 1.引入js库 <script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js&quo ...

  3. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

  4. Django配置图片上传

    本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL  和 MEDIA_ROOT 在 D:\blog ...

  5. drupal中安装CKEditor文本编辑器，并配置图片上传功能

    一.下载: 1.CKEditor模块 2.IMCE模块 二.安装       1.复制: 下载完上面两个模块之后,解压,将解压后整个文件夹,复制粘贴,放到 sites\all\modules下面,个人 ...

  6. spring boot图片上传至远程服务器并返回新的图片路径

    界面上传图片时考虑到可能会有用户的图片名称一致,使用UUID来对图片名称进行重新生成. //UUIDUtils public class UUIDUtils { public static Strin ...

  7. ckeditor4.7配置图片上传

    ckeditor作为老牌的优秀在线编辑器,一直受到开发者的青睐. 这里我们讲解下 ckeditor最新版本4.7的图片上传配置. https://ckeditor.com/ 官方 进入下载 https ...

  8. struts2+ckeditor配置图片上传

    又是一个漫漫长夜. 公司的编辑器坏了,用的是百度编辑器,上传图片的网址被框架给拦截了,我们本地怎么测试都没问题,放到服务器就这样了.和老李找了半天,疯了,没原因的. 笔者以前用过jsp+ckedito ...

  9. 【记录】spring boot 图片上传与显示

    问题:spring boot 使用的是内嵌的tomcat, 文件上传指定目录时不知道文件上传到哪个地方,不知道访问路径. //部署到服务器的tomcat上时通常使用这种方式request.getSer ...

随机推荐

  1. PHP输入流php://input [转]

    对于php://input介绍,PHP官方手册文档有一段话对它进行了很明确地概述. "php://input allows you to read raw POST data. It is ...

  2. AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式

    转载:http://blog.csdn.net/mhmyqn/article/details/25561535 HTTP请求中,如果是get请求,那么表单参数以name=value&name1 ...

  3. [Unity菜鸟] 摄像头

    1. 连接外置摄像头 2. Unity3D中调用外接摄像头,并保存为图片文件

  4. Mvc Kissy uploader实现图片批量上传 附带瀑布流的照片墙

    前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...

  5. mysql备份恢复数据库据/表

    备份单个数据库,只备份表,如要恢复,必须先创建一个数据库[root@s]# mysqldump -u root -p dbname1 > dbname1.sql[root@s]# mysql - ...

  6. R programming, In ks.test(x, y) : p-value will be approximate in the presence of ties

    Warning message: In ks.test(x, y) : p-value will be approximate in the presence of ties   The warnin ...

  7. java--关键字和保留字

    关键字:Java的关键字对java的编译器有特殊的意义,他们用来表示一种数据类型,或者表示程序的结构等. 保留字:为java预留的关键字.现在还没用到,但是在升级版本中可能作为关键字. 访问控制:pr ...

  8. bzoj3955

    首先,最短路不同的两辆车一定不会发生堵塞 对于最短路相同的点,我们把属于最短路径上的边拎出来建图跑最大流即可 然后我TLE了…… 因为很明显建出来图很大,而真正流的流量很小 普通的初始标号都是0的sa ...

  9. pinyin4j使用示例

    pinyin4j的主页:http://pinyin4j.sourceforge.net/pinyin4j能够根据中文字符获取其对应的拼音,而且拼音的格式可以定制pinyin4j是一个支持将中文转换到拼 ...

  10. java中时间格式yyyyMMddHHmmss的大小写问题

    字母     日期或时间元素 表示 示例 G Era 标志符 Text AD y 年 Year 1996 ; 96 M 年中的月份 Month July ; Jul ; 07 w 年中的周数 Numb ...