springMVC3 ckeditor3.6 图片上传 JS回调

一、引入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是CKEditorFuncNum
b是图片的访问url
c是提示消息



------------------------------获取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的数据赋值给隐藏表单项即可