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. lintcode 中等题：Max Points on a Line 最多有多少个点在一条直线上

    题目 最多有多少个点在一条直线上 给出二维平面上的n个点,求最多有多少点在同一条直线上. 样例 给出4个点:(1, 2), (3, 6), (0, 0), (1, 3). 一条直线上的点最多有3个. ...

  2. ios开发--27个提升效率的iOS开源库推荐

    超长慎入列表: DZNEmptyDataSet(UI,空表格视图解算器) PDTSimpleCalendar(UI,drop-in日历组件) MagicalRecord(实施活跃记录模式的Core D ...

  3. iOS xcuserdata

    说明:       project.xcworkspace说明:is a directory of files describing the workspace or projects. Althou ...

  4. 海明距离hamming distance

    仔细阅读ORB的代码,发现有很多细节不是很明白,其中就有用暴力方式测试Keypoints的距离,用的是HammingLUT,上网查了才知道,hamming距离是相差位数.这样就好理解了. 我理解的Ha ...

  5. UPC 2224 / “浪潮杯”山东省第四届ACM大学生程序设计竞赛 1008 Boring Counting 主席树

    Problem H:Boring Counting Time Limit : 6000/3000ms (Java/Other)   Memory Limit : 65535/32768K (Java/ ...

  6. Github欢乐多 PHP神级代码引发吐槽热

    前日,github的PHP板块惊现一段能够提升70%运行效率的代码,引发了全世界众多网友的吐槽和调侃,“awesome!”.“well done!”.“PHP是世界第一语言!”平时不苟言笑,埋头苦干的 ...

  7. C++ STL之查找算法

    C++STL有好几种查找算法,但是他们的用法上有很多共同的地方: 1.除了binary_search的返回值是bool之外(查找的了返回true,否则返回false),其他所有的查找算法返回值都是一个 ...

  8. 在Windows下利用php自带的mail函数发邮件

    这几天看<Head First PHP & MySQL>,里面有发邮件的例子是用系统自带的mail函数发送的,自己照书上写的试了一直不成功,后来终于在网上找到解决方案,现在总结下. ...

  9. BZOJ2337: [HNOI2011]XOR和路径

    题解: 异或操作是每一位独立的,所以我们可以考虑每一位分开做. 假设当前正在处理第k位 那令f[i]表示从i到n 为1的概率.因为不是有向无环图(绿豆蛙的归宿),所以我们要用到高斯消元. 若有边i-& ...

  10. MYSQL查询数据库表索引的硬盘空间占用

    查询数据库的占用 SELECT CONCAT(ROUND(SUM(index_length)/(1024*1024), 2), ' MB') AS 'Total Index Size' , CONCA ...