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