ckeditor上传图片
ckeditor版本4.4.7
![](//img-blog.csdn.net/20140918135308928?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb19fZ3Vp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](//images0.cnblogs.com/blog/431233/201504/171011334799293.jpg)
![](//img-blog.csdn.net/20140918142545374?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb19fZ3Vp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传功能。
去掉预览中的英文 ,在ckeditor/config.js中加上一个配置项:
config.image_previewText = ' '; 注意引号里面一定要有个空格,不能是空字符串。
图片上传实现
第一步:
要开启图片上传功能。
找到ckeditor/plugins/image/dialogs/image.js这个文件,CTRL+F搜索下面一段JS:
id:'Upload',hidden:!0 把感叹号去掉
这个时候编辑器上已经有上传功能了
第二步:(这里用struct2实现上传)
下面是action的代码
package com.sdhf.eam.web.action;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.sdhf.action._BaseAction;
public class CkeditorUploadAction extends _BaseAction{
private File upload;
private String uploadContentType;
private String uploadFileName;
public File getUpload() {
return upload;
}
public void setUpload(File upload) {
this.upload = upload;
}
public String getUploadContentType() {
return uploadContentType;
}
public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}
public String getUploadFileName() {
return uploadFileName;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}
public String execute() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("GBK");
PrintWriter out = response.getWriter();
// CKEditor提交的很重要的一个参数
String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
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 {
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'','文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");
out.println("</script>");
return null;
}
if (upload.length() > 600 * 1024) {
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",''," + "'文件大小不得大于600k');");
out.println("</script>");
return null;
}
InputStream is = new FileInputStream(upload);
String uploadPath = ServletActionContext.getServletContext().getRealPath("/images/ckeditor");
String fileName = java.util.UUID.randomUUID().toString(); // 采用UUID的方式命名保证不会重复
fileName += expandedName;
File toFile = new File(uploadPath, fileName);
OutputStream os = new FileOutputStream(toFile);
// 文件复制到指定位置
byte[] buffer = new byte[1024];
int length = 0;
while ((length = is.read(buffer)) > 0) {
os.write(buffer, 0, length);
}
is.close();
os.close();
// 返回“图像”选项卡并显示图片
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'"+ServletActionContext.getRequest().getContextPath()+"/images/ckeditor/"+ fileName + "','')"); // 相对路径用于显示图片
out.println("</script>");
return null;
}
}
这里有几个注意的地方:
1、 String uploadPath = ServletActionContext.getServletContext().getRealPath("/images/ckeditor");
"/images/ckeditor" 为服务器存放的目录,目录一定要存在,不然会报错
2、![](//images0.cnblogs.com/blog/431233/201504/171011318704052.png)
![](http://images0.cnblogs.com/blog/431233/201504/171011318704052.png)
这个是上传完后前台显示的路径,即下图
![](http://images0.cnblogs.com/blog/431233/201504/171011334799293.jpg)
如果路径没有设置好,预览就会没有图片显示,如图
第三步:写xml配置文件,我这里是spring+struct2
applicationContext.xml文件加上
<!-- ckeditor 图片上传action -->
<bean id="ckeditorUpload" class="com.sdhf.eam.web.action.CkeditorUploadAction" parent="_baseAction"
scope="prototype">
</bean>
struts.xml文件加上
<!-- CKEditor 上传图片 -->
<action name="ckeditorUpload" class="ckeditorUpload" method="execute">
</action>
第四步:
在ckeditor/config.js加上配置项
config.filebrowserUploadUrl = ctx+"/ckeditorUpload.action";