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. go语言入门

    Go语言最主要的特性: 自动垃圾回收 更丰富的内置类型 函数多返回值 错误处理 匿名函数和闭包 类型和接口 并发编程 反射 语言交互性 1.2.4 错误处理Go语言引入了3个关键字用 ...

  2. 用DateTime.ToString(string format)输出不同格式的日期

    http://www.cnblogs.com/xvqm00/archive/2009/02/19/1394093.html DateTime.ToString()函数有四个重载.一般用得多的就是不带参 ...

  3. IT讲师韩顺平：我为什么辞去百万年薪，自己创业？

    先自我介绍一下,我叫韩顺平,是一名IT讲师.国内很多自学PHP和Java的朋友都看过我的视频课程,算是有些知名度. 15年8月从传智辞职后,很多朋友非常关心我的去向,网上也流传各种说法,有的说我和某某 ...

  4. lua的split函数

    function split(s, delim) then return end local t = {} while true do local pos = string.find (s, deli ...

  5. 安装nginx创建错误

    ./configure: error: the HTTP gzip module requires the zlib library. 解决: yum install -y zlib-devel -- ...

  6. mysql： java.sql.SQLException: Incorrect string value: '\xF0\x9F\x92\x90</...'

    插入数据出现问题,因为包含了特殊字符. 现象: 插入的数据中如果含有某些特殊字符,会导致插入数据失败,例如字符串”测试**插入数据...“,在console中insert是正常的,但是使用java代码 ...

  7. Windows下IIS以FastCGI模式运行PHP

    由于PHP5.3 的改进,原有的IIS 通过isapi 方式解析PHP脚本已经不被支持,PHP从5.3.0 以后的版本开始使用微软的 fastcgi 模式,这是一个更先进的方式,运行速度更快,更稳定. ...

  8. IOS ARC与非ARC混合编译

    要开启ARC的:-fobjc-arc不开启ARC的:-fno-objc-arc 是否使用arc: 在build setting里找automatic reference counting,YES/NO

  9. Myeclipse多行注释快捷键及其他快捷键

    当时我看到struts2讲解视频的时候,讲解员居然能一下子注释掉好几行代码,而且注释的很整齐,然我大吃一惊,上网搜了下Myeclipse的快捷键还真多 选择你要注释的那一行或多行代码,按Ctrl+/即 ...

  10. css link和@import区别用法

    这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 1.link语法结构<link rel="stylesheet" ty ...