CKEditor版本为4.3 CKEditor 配置和部署参考CKEditor4.x部署和配置。
CKEditor编辑器的工具栏中初始的时候应该是这样子的，没有图片上传按钮
并且预览中有一堆火星文，可以修改相应配置删除它。
第一种方法： 打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”，(b.config.image_previewText||'')单引号中的内容全删了，注意别删多了。(由于ckeditor的很多js文件都是压缩过的，格式很难看，很容易删错，所以不推荐此种方法)
第二种方法：打开config.js文件，加入下面一句话
config.image_previewText=' '; //预览区域显示内容
下面研究图片上传
要想出现上传按钮，两种方法
第一种：还是刚才那个image.js
搜索“upload”可以找到这一段 id:'Upload',hidden:true，而我使用的4.3的是
id:"Upload",hidden:!0，反正改为false就行了，(遗憾的是此种方法对我这个版本不起作用)
第二种：打开config.js文件，加入下面一句话
config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待会要上传的action或servlet
OK现在基本上是下面这个样子的了
上面的只是一个上传页面。也就相当于一个HTML的form表单，
要配置点击"上传到服务器上"按钮后请求的Action。已在ckeditor/config.js中配置。
就是上面的 config.filebrowserImageUploadUrl = "admin/UserArticleFileUpload.do";
可使用chrome审查元素查看代码
接下来就是action中的上传方法：
[java] view plain copy
1. import java.io.File;
2. import java.io.FileInputStream;
3. import java.io.FileOutputStream;
4. import java.io.IOException;
5. import java.io.InputStream;
6. import java.io.OutputStream;
7. import java.io.PrintWriter;
8.
9. import javax.servlet.http.HttpServletRequest;
10. import javax.servlet.http.HttpServletResponse;
11.
12. import org.apache.struts2.ServletActionContext;
13.
14. public class ImgUploadAction {
15. private File upload; // 文件
16. private String uploadContentType; // 文件类型
17. private String uploadFileName; // 文件名
18.
19. /**
20. * 图片上传
21. *
22. * @return
23. * @throws IOException
24. */
25. public String imgUpload() throws IOException {
26.
27. // 获得response,request
28. HttpServletResponse response = ServletActionContext.getResponse();
29. HttpServletRequest request = ServletActionContext.getRequest();
30.
31. "utf-8");
32. PrintWriter out = response.getWriter();
33. // CKEditor提交的很重要的一个参数
34. "CKEditorFuncNum");
35. ""; // 文件扩展名
36. if (uploadContentType.equals("image/pjpeg")
37. "image/jpeg")) {
38. // IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg
39. ".jpg";
40. else if (uploadContentType.equals("image/png")
41. "image/x-png")) {
42. // IE6上传的png图片的headimageContentType是"image/x-png"
43. ".png";
44. else if (uploadContentType.equals("image/gif")) {
45. ".gif";
46. else if (uploadContentType.equals("image/bmp")) {
47. ".bmp";
48. else {
49. "<script type=\"text/javascript\">");
50. "window.parent.CKEDITOR.tools.callFunction(" + callback
51. ",''," + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');");
52. "</script>");
53. return null;
54. }
55. if (upload.length() > 600 * 1024) {
56. "<script type=\"text/javascript\">");
57. "window.parent.CKEDITOR.tools.callFunction(" + callback
58. ",''," + "'文件大小不得大于600k');");
59. "</script>");
60. return null;
61. }
62.
63. new FileInputStream(upload);
64. //图片上传路径
65. "/img/uploadImg");
66. // 采用时间+UUID的方式随即命名
67. fileName += expandedName;
68. new File(uploadPath);
69. if (!file.exists()) { // 如果路径不存在，创建
70. file.mkdirs();
71. }
72. new File(uploadPath, fileName);
73. new FileOutputStream(toFile);
74. byte[] buffer = new byte[1024];
75. int length = 0;
76. while ((length = is.read(buffer)) > 0) {
77. 0, length);
78. }
79. is.close();
80. os.close();
81.
82. // 返回"图像"选项卡并显示图片 request.getContextPath()为web项目名
83. "<script type=\"text/javascript\">");
84. "window.parent.CKEDITOR.tools.callFunction(" + callback
85. ",'" + request.getContextPath() + "/img/uploadImg/" + fileName + "','')");
86. "</script>");
87. return null;
88. }
89.
90. public File getUpload() {
91. return upload;
92. }
93.
94. public void setUpload(File upload) {
95. this.upload = upload;
96. }
97.
98. public String getUploadContentType() {
99. return uploadContentType;
100. }
101.
102. public void setUploadContentType(String uploadContentType) {
103. this.uploadContentType = uploadContentType;
104. }
105.
106. public String getUploadFileName() {
107. return uploadFileName;
108. }
109.
110. public void setUploadFileName(String uploadFileName) {
111. this.uploadFileName = uploadFileName;
112. }
113. }
config.js
[html] view plain copy
- CKEDITOR.editorConfig = function( config ) {
- config.image_previewText=' '; //预览区域显示内容
- config.filebrowserImageUploadUrl= "ImgUpload.action"; //要上传的action或servlet
- };
最后上传图片成功
