ckeditor实现图片上传

最新推荐文章于 2021-02-17 14:29:06 发布

Mokey.L.Golden

最新推荐文章于 2021-02-17 14:29:06 发布

阅读量279

点赞数

CC 4.0 BY-SA版权

分类专栏： Java 文章标签： ckeditor文件上传

本文链接：https://blog.youkuaiyun.com/weixin_42494243/article/details/80745419

Java 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何通过修改CKEditor配置及实现Controller来支持文件上传功能，特别针对ckeditor3.3.5版本，涵盖配置调整、文件类型与大小限制、上传路径设定等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前使用ckeditor+ckfinder实现的文件上传功能，由于现阶段应用场景ckfinder不适用,所以专门查阅文档实现单一ckeditor

的文件上传功能，以方便后面再次使用

一.使用的是ckeditor3.3.5版本

第一步：打开ckeditor/plugins/image/dialogs/image.js,搜索hidden，将所有出现id:"Upload",hidden:true的true改为false

第二步：完成上传Controller

@RequestMapping(value = "/uploadFile2")
	public void uploadPic(@RequestParam(value = "upload", required = false) MultipartFile file,
						  HttpServletResponse response,String CKEditorFuncNum) throws IOException {
		PrintWriter out =response.getWriter();
		response.setCharacterEncoding("utf-8");
		String imageName = file.getOriginalFilename();
		String expandedName = "";
		String uploadContentType  = file.getContentType();
		InputStream is;
		String filepath;
		StringBuilder sb = new StringBuilder();

			is = file.getInputStream();
			Long size = file.getSize();
			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 {
				sb.append("<script type=\"text/javascript\">");
				sb.append("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
						+ ",''," + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');");
				sb.append("</script>");
				out.println(sb.toString());
				return ;
			}
System.out.println("imageName: " + imageName + "   uploadContentType: " + uploadContentType);
			if (size > 1024 * 1024) {
				sb.append("<script type=\"text/javascript\">");
				sb.append("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
						+ ",''," + "'文件大小不得大于600k');");
				sb.append("</script>");
				out.println(sb.toString());
				return ;
			}
			DateFormat df = new SimpleDateFormat();
			imageName = df.format(new Date()) + expandedName;

			//上传文件到资源服务器
			filepath = ImageUpload.uploadStreamImg(ip, is, size, imageName);
			//filepath = path + filepath.substring(filepath.indexOf("/", 10));
			sb.append("<script type=\"text/javascript\">");
			sb.append("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
					+ ",'"  + filepath + "','')");
			sb.append("</script>");
			System.out.println("filePath: " + sb.toString());

			out.println(sb.toString());
			return ;

		//return filepath;
	}

第三步：配置点击” 上传到服务器“ 按钮之后请求的控制器，在ckeditor/config.js中加入这一段代码

config.image_previewText = '';
config.filebrowserImageUploadUrl = "/uploadFile2";

如果 image_previewText 配置文件不生效，可以去ckeditor/plugins/image/dialogs/image.js 文件ckeditor/plugins/image/dialogs/image.js

文件搜索image_previewText 删除文本框默认内容