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

最新文章

  1. LeetCode Find All Numbers Disappeared in an Array
  2. apache 虚拟主机详细配置:http.conf配置详解
  3. POJ 2697 A Board Game(Trie判重+BFS)
  4. 各系统下设置输入法按键为ctrl+shift+space
  5. memcached分布式实现原理
  6. iOS8模拟器键盘弹不出来
  7. jvm调优经验分享
  8. Rails 执行 rails server 报错 Could not find a JavaScript runtime
  9. lca最近公共祖先(模板)
  10. JQuery获取元素类名
  11. 北漂面试经历(一(两)年工作经验)-- Java基础部分
  12. 用 opencv和numpy进行图片和字符串互转,并保存至 json
  13. SVM:根据大量图片来精确实现人脸识别—Jason niu
  14. Go语言 并发编程
  15. WCF 的学习过程
  16. 论文阅读笔记三十五:R-FCN:Object Detection via Region-based Fully Convolutional Networks(CVPR2016)
  17. 无需破解:Windows Server 2008 R2 至少免费使用 900天
  18. Hadoop基础-HDFS的读取与写入过程剖析
  19. GCC 用户态&amp;内核态 Makefile
  20. django复习-2-配置、静态文件与路由

热门文章

  1. java指针
  2. Oracle监控代理安装ITM(IBM Tivoli Monitoring)
  3. Oracle RMAN备份恢复指导书
  4. presto访问 Azure blob storage
  5. [linux] linux下编译安装zlib
  6. struts checkbox选中
  7. sql2008读取excel
  8. Struts2 - Study 1
  9. bzoj4561: [JLoi2016]圆的异或并
  10. Linux删除包含特殊符号文件名的文件