springMVC3 ckeditor3.6 图片上传 JS回调

时间:2023-03-09 09:32:34
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的数据赋值给隐藏表单项即可