一、引入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. [linux]ssh(转载)

    ssh登陆问题 SSH分客户端openssh-client和openssh-server 如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果没有则su ...

  2. UnicodeToGB2312

    http://www.myluoluo.com/unicodetogb2312.love 你是否遇到类似于:\u5355\u4f4d之类的让人纠结的字符? 一个JS文件中一堆一堆的全都是这种,分析起来 ...

  3. django 1.8 TEMPLE_DIR和STATICFILES_DIRS配置

    django 1.6后settings.py文件中没有了TEMPLATE_DIRS模板目录和STATICFILES_DIRS静态访问目录,需要手动添加,最近也遇到这个问题,把解决办法说一下 1.环境 ...

  4. php连接mysql

    一.php连接mysql的函数 1.mysql_connect 作用:连接mysql eg:$con=mysql_connect('localhost','root','123456'); 2.mys ...

  5. hadoop map-red的执行过程

    hadoop的 map-red就是一个并行计算平台,我们在使用这个平台的时候,要做的事情就是提交自己定制的任务(job,主要定制map类,reduce类,combine类等类),然后设置job的各种参 ...

  6. unity 脚本(自定义组件)的事件触发关系

  7. js文本框验证

    1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...

  8. 实验记录一 初步接触cortex-M3

    应该说老早就在接触cortex-M3了.曾经没想到会接触嵌入式,结果由于导师的缘故.在选择项目管理时,就呵呵了.不废话.搭配环境非常easy,纯粹傻瓜式.可由于自己的马虎,却让自己一直困惑. 记得在前 ...

  9. CKPlayer的列表框的demo

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  10. 老李分享:qtp自动化测试框架赏析-关键字自动化测试框架

    老李分享:qtp自动化测试框架赏析-关键字自动化测试框架   QTP从2005年继winrunner,robot逐渐退出历史舞台之后,占领主流自动化测试工具市场已经10年之久.当初为了提高在自动化测试 ...