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. 欧拉工程第66题：Diophantine equation

    题目链接 脑补知识:佩尔方差 上面说的貌似很明白,最小的i,对应最小的解 然而我理解成,一个循环的解了,然后就是搞不对,后来,仔细看+手工推导发现了问题.i从0开始变量,知道第一个满足等式的解就是最小 ...

  2. React gulp、Browserify、Webpack实例

    一.gulp var gulp = require('gulp'); var react = require('gulp-react'); gulp.task('jsx', function() { ...

  3. linux系统启动级别

    linux运行级别 以管理员身份进入Linux,修改文件:/etc/inittab 找到"id:5:initdefault:"其中的5就是X-window,为默认的运行级别 lin ...

  4. 利用PhantomJS搭建Highcharts export服务

    利用PhantomJS搭建Highcharts export服务 一直在使用Highcharts做web图表的展示, 但是当发送定时的报表邮件的遇到了这个问题. 为了保证邮件图表和web页图表样式一致 ...

  5. YUV到RGB的转换

    以下内容来源于网络,下面三个链接里的内容是比较好的,感谢博主的分享. http://blog.csdn.net/housisong/article/details/1859084 http://blo ...

  6. UVa 1648 (推公式) Business Center

    题意: 有一种奇怪的电梯,每次只能向上走u个楼层或者向下走d个楼层 现在有m个这种电梯,求恰好n次能够到达的最小楼层数(必须是正数),最开始默认位于第0层. 分析: 假设电梯向上走x次,则向下走n-x ...

  7. 关于ie6对齐

    先来没有任何对齐时的样子: 1.一种是在父级没有高度的情况下居中. 给每个独立的元素都加上vertical-align:middle; 针对文字可以不加,加与不加都可以居中对齐.但是无法做到绝对的居中 ...

  8. jquery图表插件morris.js参数详解和highcharts图表插件

    一.morris.js 优点:轻巧.简单好用 缺点:没highcharts功能多,常用的足以 网址:http://morrisjs.github.io/morris.js/ 核心代码 1.head调用 ...

  9. Asp.Net MVC Views页面不包含“GetEnumerator”的公共定义

    “/”应用程序中的服务器错误. 编译错误 说明: 在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码. 编译器错误消息: CS1579: “Web.Model ...

  10. [转]Jquery Ajax用法

    原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源:   时间 ...