一、引入js文件

<script type="text/javascript" src="<%=base %>/resources/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="<%=base %>/resources/ckeditor/adapters/jquery.js"></script>

二、增加图片上传功能 uploadUrl为上传图片的servlet,或controller。 #editor1为textarea的id

<script type="text/javascript">
$(function(){
    var config = {
            filebrowserImageUploadUrl : '${uploadUrl}'
        };

$('#editor1').ckeditor(config);
        });
</script>

三、编写上传类,返回回调函数

/**图片上传
 * @author Administrator
 *
 */
@Controller
@RequestMapping("/upload.do")
public class FileUploadController {
    @RequestMapping(method=RequestMethod.GET)
    public String upload2(){
        return "upload";
    }

    @RequestMapping(method=RequestMethod.POST)
    public void upload(MultipartFile upload,Integer CKEditorFuncNum,HttpServletRequest request,HttpServletResponse resp){
        System.out.println("contentType="+upload.getContentType());
        System.out.println("originalFilename="+upload.getOriginalFilename());
        System.out.println("CKEditorFuncNum="+CKEditorFuncNum);

        if(!upload.isEmpty()&&upload.getContentType().startsWith("image/")){
            File picFolder = createFolder(request);
            String extName = "."+FileNameUtil.getExtensionName(upload.getOriginalFilename());
            String picAbsPath = picFolder.getAbsoluteFile()+File.separator+RandomUtil.rndChars(6)+extName;
            File picFile = new File(picAbsPath);
            String picRelativePath=request.getContextPath()+"/upload/"+picFolder.getName()+"/"+picFile.getName() ;//服务器相对路径
            System.out.println("picRelativePath="+picRelativePath);
            try {
                //保存图片
                FileUtils.copyInputStreamToFile(upload.getInputStream(), picFile);
                //返回数据                resp.setHeader("Content-type", "text/html;charset=UTF-8");                 resp.setCharacterEncoding("UTF-8");

                StringBuffer sb = new StringBuffer();
                sb.append("<script type=\"text/javascript\">");
                sb.append("window.parent.CKEDITOR.tools.callFunction("+CKEditorFuncNum+",'"+picRelativePath+"' , '上传成功!');");
                sb.append("</script>"); 
                resp.getWriter().write(sb.toString());
            } catch (IOException e) {
                e.printStackTrace();
            }
        }else{
            System.out.println("没有选择图片文件");
        }
    }

    private File createFolder(HttpServletRequest request) {
        //创建根文件夹
        //File uploadFolderRoot = new File("D:/upload_file");
        String uploadFolderRoot = request.getServletContext().getRealPath("/upload");
        //创建日期文件夹
        SimpleDateFormat date = new SimpleDateFormat("yyyy-MM-dd");
        String dateFolder = date.format(new Date());

        File uploadFile = new File(uploadFolderRoot, dateFolder);
        if(!uploadFile.exists())uploadFile.mkdirs();
        return uploadFile;
    }
    

最主要的是这句

StringBuffer sb = new StringBuffer();
                sb.append("<script type=\"text/javascript\">");
                sb.append("window.parent.CKEDITOR.tools.callFunction("+CKEditorFuncNum+",'"+picRelativePath+"' , '上传成功!');");
                sb.append("</script>"); 

即回调的JS代码
CKEditorFuncNum是隐藏的表单项,传给了上传的servlet,而不是网上的0啊,1啊。。。
window.parent.CKEDITOR.tools.callFunction(a,b,c)  三个参数a是CKEditorFuncNumb是图片的访问urlc是提示消息

------------------------------获取ckeditor里的数据function checkForm(){    var con = CKEDITOR.instances.editor1.getData();    if($.trim(con)==""){        alert("请输入内容");        return false;    }    $("input[name=ckcontent]").val(con);      return true;}editor1为你所指定的textarea的id
<form action="${submitArticleUrl}" method="post" onsubmit="return checkForm()">
                <textarea  id="editor1" name="editor1"></textarea>
                <p/>
                <input type="hidden" name="ckcontent"/>
                <input type="submit" value="添加"/>
                </form>

在提交表单时处理,将editor的数据赋值给隐藏表单项即可

springMVC3 ckeditor3.6 图片上传 JS回调的更多相关文章

  1. 百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor

    百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: ...

  2. 图片上传JS插件梳理与学习

    项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端:AjaxUpload.js seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数 ...

  3. 头像截取 图片上传 js插件

    先看一下整体效果 页面html <div class="row"> <div class="tabs-container"> <u ...

  4. 图片上传js

    var imgURL; function getImgURL(node) { try{ var file = null; if(node.files && node.files[0] ...

  5. js 利用iframe和location.hash跨域解决的方法,java图片上传回调JS函数跨域

    奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...

  6. 图片上传,支持同步/异步、预览(MVC、uploadify异步提交、js预览、ajaxSubmit异步提交)兼容大部分浏览器,含代码

    图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...

  7. 原生JS实现异步图片上传(预览)

    效果 实现过程分为两步 1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片 2. 通过FormData对象生成表单数据,通过ajax上传到后台 HTML & ...

  8. html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  9. 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题

    曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...

随机推荐

  1. Hadoop学习笔记—20.网站日志分析项目案例(二)数据清洗

    网站日志分析项目案例(一)项目介绍:http://www.cnblogs.com/edisonchou/p/4449082.html 网站日志分析项目案例(二)数据清洗:当前页面 网站日志分析项目案例 ...

  2. VS2013新建MVC5项目,使用nuget更新项目引用后发生Newtonsoft.Json引用冲突的解决办法

    错误信息如下: 错误    3    类型“Newtonsoft.Json.JsonPropertyAttribute”同时存在于“c:\Program Files (x86)\Microsoft V ...

  3. Android MVP + 泛型,实现了友好VP交互及Activity潜在的内存泄露的优化

    Android MVP粗来已经有段时间了,在项目中我也多多少少用了一些,不得不说代码使用这种模式后,条例确实清晰了好多,整个流程看起来有点各司其职的感觉(另一种的java面向对象的方式). 不过这里是 ...

  4. Redis HyperLogLog

      Redis 在 2.8.9 版本添加了 HyperLogLog 结构. Redis HyperLogLog 是用来做基数统计的算法,HyperLogLog 的优点是,在输入元素的数量或者体积非常非 ...

  5. KindEditor 4.1.10 (2013-11-23)首行空格不能显示在编辑器内

    KindEditor版本: KindEditor 4.1.10 (2013-11-23) 一.BUG再现步骤: 1.文章前面插入二个全角空格作为缩进,因为并非所有段落都有缩进故不采用 CSS 的 te ...

  6. 关于最大流的EdmondsKarp算法详解

    最近大三学生让我去讲课,我就恶补了最大流算法,笔者认为最重要的是让学弟学妹们入门,知道算法怎么来的?为什么是这样?理解的话提出自己的改进,然后再看看Dinic.SAP和ISAP算法….. 一.概念引入 ...

  7. 关于 knockout js 学习中的疑问 (1)

    最近刚刚学习knockout中遇到如下问题: 1.在给viewModel定义一个方法时,有时后面跟 的this,有的时候没有 如下所示: this.fullName = ko.computed(fun ...

  8. windows系统中给qt工程添加第三方库

    · TEMPLATE = app CONFIG += console c++11 CONFIG -= app_bundle CONFIG -= qt SOURCES += main.cpp LIBS ...

  9. JAVA自学笔记03

    1.三目运算符 1)格式:(关系表达式)?表达式1:表达式2 true则执行表达式1,false则执行表达式2 @ 例题1 :求两数中的较大值 System.out.println(x>y?x: ...

  10. 鼠标右键添加&quot;在此处打开命令窗口&quot;

    从windows7开始,提供了一个便于从当前文件夹打开cmd命令行窗口的快捷方式: 直接使用  Shift+鼠标右键==>“在此处打开命令行窗口” 有可能以后会遇到的问题,可参考如下.. htt ...