1.从官网下载ckeditor最新版本,ckeditor-full-4.6.1.zip
2.解压压缩文件,把解压出来的文件放到项目的WebRoot文件夹下
3.在需要使用在线编辑的页面导入ckeditor.js(由于我们使用ssm框架,一定要记得放行,不然会被拦截)
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<textarea cols="80" id="editor1" name="editor1" rows="10">
</textarea>
<script type="text/javascript">CKEDITOR.replace( "editor1")</script>(此处textarea的name属性起作用)
注意:部分浏览器可能不支持,换个浏览器试试
4.ckeditor可以支持用户自定义:工具栏,语言,皮肤,快捷键(这里不做详细介绍,百度)
自定义皮肤:ckeditor文件夹下有一个skins文件夹,这个文件夹里面就是放着皮肤,默认一种,需要自己下载
ckeditor文件夹下有个config.js,配置如下:
config.skin = 'office2013';
5.图片上传
5.1
cdeditor的文件上传功能默认被隐藏掉了,需要我们自己打开
我们找到ckeditor->plugins->image->dialogs->image.js
打开搜索upload 有个hidden属性默认值为!0,我们把!去掉,或者改为false,就可以看到上传功能出来了
5.2
写后台方法(controller)
@RequestMapping("/uploadImg")
public void uplodaImg(@RequestParam("upload")MultipartFile file,
HttpServletRequest request,
HttpServletResponse response,
@RequestParam("CKEditorFuncNum")String CKEditorFuncNum)
throws IllegalStateException, IOException{
// 设置headers参数
String fullContentType = "text/html;charset=UTF-8";
response.setContentType(fullContentType);
PrintWriter out =response.getWriter();
String fileName=file.getOriginalFilename();
String uploadContentType =file.getContentType();
String savePath = request.getSession().getServletContext().getRealPath("/upload");
String expandedName ="";
if (uploadContentType.equals("image/pjpeg")
|| uploadContentType.equals("image/jpeg")) {
// IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg
expandedName = ".jpg";
} else if (uploadContentType.equals("image/png")
|| uploadContentType.equals("image/x-png")) {
// IE6上传的png图片的headimageContentType是"image/x-png"
expandedName = ".png";
} else if (uploadContentType.equals("image/gif")) {
expandedName = ".gif";
} else if (uploadContentType.equals("image/bmp")) {
expandedName = ".bmp";
} else {
System.out.println("上传文件格式不正确");
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",''," + "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");
out.println("</script>");
return ;
}
if (file.getSize()> 600 * 1024) {
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",''," + "'文件大小不得大于600k');");
out.println("</script>");
return ;
}
java.util.Date d = new java.util.Date();
DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String dirName = sdf.format(d);
String path = savePath +File.separator+ dirName;
File f = new File(path);
if(!f.exists()){
f.mkdir();
}
fileName = df.format(new Date())+expandedName;
file.transferTo(new File(path +File.separator+fileName));
// 返回"图像"选项卡并显示图片 request.getContextPath()为web项目名
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",'"+request.getContextPath() +"/upload/"+ f.getName() + "/" + fileName + "','')");
out.println("</script>");
out.flush();
out.close();
return ;
}
注意:1.String fullContentType = "text/html;charset=UTF-8";
response.setContentType(fullContentType);
这个代码很重要,设置header参数,如果不设置,上传图片后无法返回图片的路径
2.out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",'"+request.getContextPath() +"/upload/"+ f.getName() + "/" + fileName + "','')");
out.println("</script>");
out.flush();
out.close();
request.getContextPath()这行代码要加,有些浏览器不加,无法预览图片
5.3 配置config.js
config.filebrowserImageUploadUrl='/news/file/uploadImg'(这里填写后台方法地址,有些浏览器需要加项目名);
config.image_previewText=' ';(把预览图片窗口中的鸟语干掉)
2.解压压缩文件,把解压出来的文件放到项目的WebRoot文件夹下
3.在需要使用在线编辑的页面导入ckeditor.js(由于我们使用ssm框架,一定要记得放行,不然会被拦截)
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<textarea cols="80" id="editor1" name="editor1" rows="10">
</textarea>
<script type="text/javascript">CKEDITOR.replace( "editor1")</script>(此处textarea的name属性起作用)
注意:部分浏览器可能不支持,换个浏览器试试
4.ckeditor可以支持用户自定义:工具栏,语言,皮肤,快捷键(这里不做详细介绍,百度)
自定义皮肤:ckeditor文件夹下有一个skins文件夹,这个文件夹里面就是放着皮肤,默认一种,需要自己下载
ckeditor文件夹下有个config.js,配置如下:
config.skin = 'office2013';
5.图片上传
5.1
cdeditor的文件上传功能默认被隐藏掉了,需要我们自己打开
我们找到ckeditor->plugins->image->dialogs->image.js
打开搜索upload 有个hidden属性默认值为!0,我们把!去掉,或者改为false,就可以看到上传功能出来了
5.2
写后台方法(controller)
@RequestMapping("/uploadImg")
public void uplodaImg(@RequestParam("upload")MultipartFile file,
HttpServletRequest request,
HttpServletResponse response,
@RequestParam("CKEditorFuncNum")String CKEditorFuncNum)
throws IllegalStateException, IOException{
// 设置headers参数
String fullContentType = "text/html;charset=UTF-8";
response.setContentType(fullContentType);
PrintWriter out =response.getWriter();
String fileName=file.getOriginalFilename();
String uploadContentType =file.getContentType();
String savePath = request.getSession().getServletContext().getRealPath("/upload");
String expandedName ="";
if (uploadContentType.equals("image/pjpeg")
|| uploadContentType.equals("image/jpeg")) {
// IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg
expandedName = ".jpg";
} else if (uploadContentType.equals("image/png")
|| uploadContentType.equals("image/x-png")) {
// IE6上传的png图片的headimageContentType是"image/x-png"
expandedName = ".png";
} else if (uploadContentType.equals("image/gif")) {
expandedName = ".gif";
} else if (uploadContentType.equals("image/bmp")) {
expandedName = ".bmp";
} else {
System.out.println("上传文件格式不正确");
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",''," + "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");
out.println("</script>");
return ;
}
if (file.getSize()> 600 * 1024) {
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",''," + "'文件大小不得大于600k');");
out.println("</script>");
return ;
}
java.util.Date d = new java.util.Date();
DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String dirName = sdf.format(d);
String path = savePath +File.separator+ dirName;
File f = new File(path);
if(!f.exists()){
f.mkdir();
}
fileName = df.format(new Date())+expandedName;
file.transferTo(new File(path +File.separator+fileName));
// 返回"图像"选项卡并显示图片 request.getContextPath()为web项目名
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",'"+request.getContextPath() +"/upload/"+ f.getName() + "/" + fileName + "','')");
out.println("</script>");
out.flush();
out.close();
return ;
}
注意:1.String fullContentType = "text/html;charset=UTF-8";
response.setContentType(fullContentType);
这个代码很重要,设置header参数,如果不设置,上传图片后无法返回图片的路径
2.out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",'"+request.getContextPath() +"/upload/"+ f.getName() + "/" + fileName + "','')");
out.println("</script>");
out.flush();
out.close();
request.getContextPath()这行代码要加,有些浏览器不加,无法预览图片
5.3 配置config.js
config.filebrowserImageUploadUrl='/news/file/uploadImg'(这里填写后台方法地址,有些浏览器需要加项目名);
config.image_previewText=' ';(把预览图片窗口中的鸟语干掉)