ckeditor结合SpringMVC的使用

最新推荐文章于 2018-12-13 15:52:55 发布

taohuaqin

最新推荐文章于 2018-12-13 15:52:55 发布

阅读量966

点赞数

CC 4.0 BY-SA版权

文章标签： spring mvc ckeditor

本文链接：https://blog.youkuaiyun.com/taohuaqin/article/details/72783059

本文介绍如何在项目中集成CKEditor富文本编辑器，并实现图片上传功能。具体步骤包括下载并配置CKEditor，以及使用Spring MVC处理图片上传请求。

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

1.在官网上下载CKeditor包，进行解压，将解压后的文件夹放到项目webcontent目录下

2.在需要用到ckeditor的页面导入ckeditor.js

<script src="${pageContext.request.contextPath}/static/js/My97DatePicker/WdatePicker.js" type="text/javascript" ></script>

在使用编辑器的地方加上如下代码：

//实例化编辑器
CKEDITOR.replace('contentEditor', {
//清空预览区域显示内容
image_previewText : '',
//图片上传
filebrowserUploadUrl : '<%=request.getContextPath()%>/policyController/imageUpload.do',

} );

</script>

3、ckeditor编辑器上传图片

点击上传到服务器：指定上传图片路径，有两种方式，一种是在config.js中指定，另一种是在实例化编辑器的时候指定图片上传路径，通过filebrowerUploadUrl属性指定，如上图，后面为SpringMvc上传路径。

后台上传代码：

@ResponseBody
@RequestMapping(value = "/imageUpload", produces = "text/html;charset=UTF-8")
public void imageUpload(@RequestParam(value = "upload", required = false) MultipartFile file,
HttpServletRequest request,HttpServletResponse response) throws Exception{
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
//CKEditor提交的很重要的一个参数
String callback = request.getParameter("CKEditorFuncNum");
String imageName = "";
//图片上传目录
String DirectoryName=PropertyUtils.getPropertyValueByKey("imagePath1");
//图片上传位置
String imagePath = request.getSession().getServletContext().getRealPath("/"+DirectoryName);

File folder = new File(imagePath);
if (!folder.exists()) {
folder.mkdir();
}
if(!file.isEmpty()){
imageName=file.getOriginalFilename();
String path = imagePath+imageName;
//返回服务器的地址
String imageContextPath = request.getContextPath() + "/" + DirectoryName + imageName;
File infoFile = new File(path);
InputStream is=file.getInputStream();
FileOutputStream fos = new FileOutputStream(infoFile);
byte[] bs = new byte[1024];
int len=is.read(bs);
while(len!=-1) {
fos.write(bs, 0, len);
len=is.read(bs);
}
is.close();
fos.flush();
fos.close();
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" + imageContextPath + "','')");
out.println("</script>");
}