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. Project Euler 82：Path sum: three ways 路径和：3个方向

    Path sum: three ways NOTE: This problem is a more challenging version of Problem 81. The minimal pat ...

  2. 转一个distinct用法，很有帮助

    转一个distinct用法,很有帮助 (2011-12-01 15:18:11) 转载▼ 标签: 杂谈 分类: mysql复制 在使用mysql时,有时需要查询出某个字段不重复的记录,虽然mysql提 ...

  3. 向安富利（Avnet）学什么？

    这个只做电子元器件分销的企业,居然能数次进入<财富>排行榜.看来,这是一个在供应链上创造价值的高手.在企业竞争已经集中到供应链竞争的今天,安富利的成功之道,无疑具有特别的意义. 2000年 ...

  4. Yii2 基于RESTful架构的 advanced版API接口开发 配置、实现、测试

    环境配置: 开启服务器伪静态 本处以apache为例,查看apache的conf目录下httpd.conf,找到下面的代码 LoadModule rewrite_module modules/mod_ ...

  5. word文档标题级别批量更改——批量降级与升级实例

    word文档标题级别批量更改——批量降级与升级实例   word文档标题级别批量更改——批量降级实例 2012年12月21日16:30:44 现有一个3级文档结构的word文档,如下图所示 先需要将上 ...

  6. idea 找不到 没有 tomcat server

    follow me 1. 2. 3. 4.

  7. Map.putAll方法——追加另一个Map对象到当前Map集合(转)

    该方法用来追加另一个Map对象到当前Map集合对象,它会把另一个Map集合对象中的所有内容添加到当前Map集合对象. 语法  putAll(Map<? extends K,? extends V ...

  8. 奇怪的transform bug

    对一个元素使用transform:rotate 进行旋转,造成: 父元素的背景图位置偏移,往下降,背景图也会变模糊一些 造成重绘,导致该元素后面的兄弟元素受到影响,变得模糊,并且无法遮盖住父元素的背景 ...

  9. SQL性能优化之一

    1: 如果确定要用到删除全表 delete from tablename commit 这种方式是不可取的,因这样会产生大量的redo-log,一般建议用truncate或是临时表(这样可以告诉ora ...

  10. [转载]深入理解JAVA的接口和抽象类

    深入理解Java的接口和抽象类 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的 ...