导航

springMVC3 ckeditor3.6 图片上传 JS回调

Posted on 2013-12-14 18:34  曙光城邦  阅读(574)  评论(0编辑  收藏  举报

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