本人用的
CKEditor版本为4.4.7
CKEditor
配置和部署</div>
CKEditor编辑器的工具栏中初始的时候,默认情况下是禁止上传的,所以没有图片上传按钮
实现图片上传:
第一步:</strong>
在ckeditor\plugins\image\dialogs\image.js里面Ctrl+f(我用的是myeclipse 查找功能) 查找 Upload ( id:"Upload",hidden:!0,) 这里把0改成1;就能显示上传了。
第二步:</strong>
第三步:</strong>
下面研究图片上传</div>
最后上传图片成功
打开config.js文件,加入下面一句话</div>
config.filebrowserImageUploadUrl= "imageupload(自己定义的名字,但和struts里的action里的名字一样)"; //待会要上传的action或servlet
OK现在基本上是下面这个样子的了
OK现在基本上是下面这个样子的了
第四步:
接下来就是action中的上传方法:
package 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.opensymphony.xwork2.ActionSupport;
public class images extends ActionSupport {
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);
//默认图片保存在tomcat下,这里可以进行更改
String uploadPath =
ServletActionContext.getServletContext().getRealPath("/");
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
+ ",'" + fileName +
"','')"); // 相对路径用于显示图片
out.println("</script>");
return null;
}
}
第四步:struts里面添加代码
</p>
<package
name="test" extends="struts-default"
namespace="/">
<action name="<span style="font-size:14px;">imageupload</span>"
class="action.images">
<result>/index.jsp</result>
</action>
</package>
最后上传图片成功
config.js里面的代码
</p>
/**
* @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All
rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
};
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
<span style="color:#FF0000;">config.image_previewText=' ';
//预览区域显示内容
config.filebrowserImageUploadUrl= "imageupload";
//要上传的action或servlet </span>
};