acme
1、首先引用ckeditor并且初始化，这里示例比较简单，也不加样式，版本为ckeditor4.11.4
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
<title>CKeditor</title>
<script src="${pageContext.request.contextPath}/static/ckeditor_4.11.4/ckeditor.js"></script>
</head>
<body>
<textarea name="editor" id="editor"></textarea>
<script>
CKEDITOR.replace('editor',{
filebrowserImageUploadUrl :"${pageContext.request.contextPath}/file/uploadImages.do?"
});
</script>
</body>
</html>在初始化CKeditor的时候filebrowserImageUploadUrl :"${pageContext.request.contextPath}/file/uploadImages.do?"这里填写处理图片上传的地方，最后的?加上表示支持直接粘贴自动上传，不加只能从图片中选择图片上传
接下来就是后台
package cc.acme_me.website.controller;
import cc.acme_me.website.utils.PropertiesUtils;
import cc.acme_me.website.utils.ResponseUtil;
import cc.acme_me.website.utils.StringUtils;
import net.sf.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
@Controller
@RequestMapping("/file")
public class FileUploadController {
@RequestMapping("/uploadImages")
public String uploadImages(@RequestParam("upload") MultipartFile file, HttpServletResponse response, HttpServletRequest request) throws IOException {
response.setContentType("text/html;charset=utf-8");
JSONObject jsonObject = new JSONObject();
try {
if (file.isEmpty()) {
jsonObject.put("uploaded", 0);
Map<String, String> resultMap = new HashMap<>();
resultMap.put("message", "失败了");
jsonObject.put("error", resultMap);
} else {
String fileName = file.getOriginalFilename();
fileName = StringUtils.getUUID() + fileName.substring(fileName.lastIndexOf("."));
String path = request.getServletContext().getRealPath("/") + PropertiesUtils.getStringValue("imagePath");
FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(new File(path + "/" + fileName)));
jsonObject.put("uploaded", 1);
jsonObject.put("url", "userImage/"+fileName);
}
} catch (Exception e) {
e.printStackTrace();
}
ResponseUtil.write(response, jsonObject);
return null;
}
}
上传图片主要是注意一下json返回的数据
如果成功，返回的数据格式应该是{"uploaded":"1","url":"图片显示的路径"}
如果失败了，返回数据的格式应该是{"uploaded":"0","error":{"message":"上传失败信息"}}
接下来就可以看到演示效果了
当然，也支持图片粘贴上传