ckeditor 图片上传最新完美处理

需要做的有以下几步：
1. 到官网下载ckeditor，网址：http://ckeditor.com/download
2. 复制到java web项目目录下
3. 配置config文件，打开图片上传功能
   

CKEDITOR.editorConfig = function (config) {
// 换行方式
	config.enterMode = CKEDITOR.ENTER_BR;

	// 当输入：shift+Enter是插入的标签
	config.shiftEnterMode = CKEDITOR.ENTER_BR;// 
	//图片处理
	config.pasteFromWordRemoveStyles = true;
	config.filebrowserImageUploadUrl = "ckUploadImage.action?type=image";
	
	// 去掉ckeditor“保存”按钮
	config.removePlugins = 'save';
};

** 在这里另附flex引用ckeditor 编辑器默认全屏方法：
修改ckeditor.html页面：

<script type="text/javascript">
		if ( typeof CKEDITOR == 'undefined' )
		{
		  document.write('加载失败') ;
		}
		else
		{
		  //var editor = CKEDITOR.replace( 'editor1',
		  //     {
			//		customConfig: "news_ck_config.js"
		//		});
		 
		  var editor = CKEDITOR.replace( 'editor1');
				
		  CKEDITOR.on('instanceReady', function(evt){
	         var editor = evt.editor;
	         editor.execCommand('maximize');
	      });
		}

</script>

4. java后台处理代码

// 上传图片
	@Action(value = "/ckUploadImage", results = { @Result(name = "success", location = "/upload.jsp") })
	public String uploadImages() throws Exception {
		HttpServletRequest request = ServletActionContext.getRequest();
		FileOutputStream fos;
		String webRoot = request.getSession().getServletContext().getRealPath(
				"");
		// 获取图片后缀名
		String partRightType = uploadFileName.substring(uploadFileName
				.lastIndexOf("."));
		String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
		// 判断图片的格式
		if (!ImageFile.checkImageType(partRightType)) {
			String path = "";
			String alt_msg = "Sorry! Image format selection is incorrect, please choose GIF, jpeg, PNG format JPG, picture!";
			pringWriterToPage("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("
					+ CKEditorFuncNum
					+ ", '"
					+ path
					+ "' , '"
					+ alt_msg
					+ "');</script>");
		} else {
			try {

				uploadFileName = DateUtils.getDateNoStyle() + "-"
						+ UUID.randomUUID() + partRightType;

				String savePath = webRoot + Constants.UPLOAD_IMAGES_PATH;
				File uploadFilePath = new File(savePath);
				if (uploadFilePath.exists() == false) {
					uploadFilePath.mkdirs();
					System.out.println("路径不存在,但是已经成功创建了" + savePath);
				} else {
					System.out.println("路径存在了" + savePath);
				}
				fos = new FileOutputStream(new File(savePath + uploadFileName));
				FileInputStream fis = new FileInputStream(getUpload());
				byte[] buffer = new byte[1024];
				int len = 0;
				while ((len = fis.read(buffer)) > 0) {
					fos.write(buffer, 0, len);
				}
				fos.close();
				fis.close();
			} catch (FileNotFoundException foe) {
				System.out.println("上传文件为0字节");
			}

			// String path = "http://" + request.getServerName() + ":"
			// + request.getServerPort() + request.getContextPath()
			// + Constants.UPLOAD_IMAGES_PATH + uploadFileName;

			String path = request.getContextPath()
					+ Constants.UPLOAD_IMAGES_PATH + uploadFileName;
			String alt_msg = "";
			pringWriterToPage("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("
					+ CKEditorFuncNum
					+ ", '"
					+ path
					+ "' , '"
					+ alt_msg
					+ "');</script>");

		}

		return null;
	}

* 其实重点的代码就是这点，相信大家都能看的懂，有不懂的留言！
pringWriterToPage("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum
+ ", '"
+ path
+ "' , '"
+ alt_msg
+ "');</script>");

看到大家留言很多，有问题就加我QQ（398329585）询问吧，感谢大家！

评论

24 楼 429537044 2012-12-26  

uploadFileName是怎么获取到的呢

23 楼 snakefei 2012-12-11  

急求CKEditorFuncNum的值是什么啊
或者详细的说一下怎么才能查出具体CKEditorFuncNum的值是多少啊！

22 楼 simusuishi 2012-11-16  

如果上传的文件类型值错误，或者出现其他异常。pringWriterToPage也是只要像你这么写就可以了，是吗？
我只是担心，返回值的参数个数，会导致上传文件后前台报错。呵呵！

21 楼 liujiaxian 2012-08-24  

11111111111111111111111111[align=center][/align][url][/url][flash=200,200][/flash][b][/b]

20 楼 yanghai30175 2012-08-17  

我想问一下.FileInputStream fis = new FileInputStream(getUpload());  这里面的getUpload()方法是哪儿的ne 。。有代码吗？

19 楼 Vimesly 2012-06-27  

古叶斋 写道

弱弱地问一句，CKEditorFuncNum是什么？有哪些取值？

这是ckeditor里面自己的参数 在你保存的时候就传如后台了，如要知道具体取那些值，可以去看下js源码。

18 楼 古叶斋 2012-06-21  

弱弱地问一句，CKEditorFuncNum是什么？有哪些取值？

17 楼 Vimesly 2011-10-11  

16 楼 Vimesly 2011-09-13  

huangzuoyu 写道

傻傻的问一 ckeditor 图片名字是汉语 怎么显示不了啊

汉字的我还真没测试，我一般图片的名称都是重命名的，经过MD5加密和日期毫秒数重命名的。

15 楼 Vimesly 2011-09-13  

csuct 写道

这个不知道和路径有没关系
本地调试的时候 可以跳转到预览框
部署到虚拟空间之后 图片上传成功了 但是没有跳转到到预览框 却在原先的页面
显示出 上面的这段js代码 却没有执行。

应该是路劲的问题。。

14 楼 huangzuoyu 2011-09-06  

傻傻的问一 ckeditor 图片名字是汉语 怎么显示不了啊

13 楼 csuct 2011-09-01  

这个不知道和路径有没关系
本地调试的时候 可以跳转到预览框
部署到虚拟空间之后 图片上传成功了 但是没有跳转到到预览框 却在原先的页面
显示出 上面的这段js代码 却没有执行。

12 楼 Vimesly 2011-08-11  

spart_123 写道

牛BFDSAFDSFSDFSFSDFAFSFSFS但是发达省份十大发大水法但是发生

  坏人。。。。

11 楼 spart_123 2011-08-11  

牛BFDSAFDSFSDFSFSDFAFSFSFS但是发达省份十大发大水法但是发生

10 楼 Vimesly 2011-08-11  

  

9 楼 Vimesly 2011-07-07  

airballbibi 写道

文件对象：upload
文件名：uploadFileName
pringWriterToPage(String)函数应该就是一个PrintWriter.write(String)。
感谢楼主分享。
如果能集成到CKEditor自身目录下，就完美了。

3Q

8 楼 airballbibi 2011-07-06  

文件对象：upload
文件名：uploadFileName
pringWriterToPage(String)函数应该就是一个PrintWriter.write(String)。
感谢楼主分享。
如果能集成到CKEditor自身目录下，就完美了。

7 楼 Vimesly 2011-05-25  

zjut_jing 写道

upload.jsp又是怎么跟ckeditor结合起来的呢？

不需要upload.jsp啊 我处理的是ckeditor自带的那个上传组件的！

6 楼 zjut_jing 2011-05-25  

upload.jsp又是怎么跟ckeditor结合起来的呢？

5 楼 zjut_jing 2011-05-25  

你这边upload.jsp这个是怎么处理的呢？