首先需要下载所需要的ckeditor版本,官网下载:http://download.cksource.com/CKEditor/CKEditor。
我这里用的是CKEditor4.4.6 标准版standard。
官网下载:http://download.cksource.com/CKEditor/CKEditor/CKEditor 4.4.6/ckeditor_4.4.6_standard.zip
html页面上需要指定类名为ckeditor
<textarea rows="" cols="" class="ckeditor" name="shopDetail"></textarea>
点击图片
弹出
若没有上传按钮,在config.js里面添加
// 上传图片路径
config.filebrowserImageUploadUrl = "/back/shopinfo/uploadFile";
就会有了,同时这也是上传图片的路径,也就是action的路径。
接下来controller的内容
@RequestMapping("uploadFile")
public void uploadFile(@RequestParam("upload") MultipartFile uploadfile,HttpServletRequest request,HttpServletResponse response) throws IOException {
try {
// 图片所存的路径
String url = shopInfoService.doPutToFileServer(uploadfile, FILE_SERVER_URL);
String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
PrintWriter out = response.getWriter();
// 对页面返回这个,才会实现图片的预览
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum + ",'" + url + "','')");
out.println("</script>");
out.flush();
out.close();
return;
} catch (Exception e) {
e.printStackTrace();
}
service的内容
@Override
public String doPutToFileServer(MultipartFile file, String url) {
String fileName = file.getOriginalFilename();
String uploadUrl = FileNameCreator.creatRandomName(url, fileName);
Client client = new Client();
WebResource webResource = client.resource(uploadUrl);
try {
byte[] buf = file.getBytes();
webResource.put(String.class,buf);
return uploadUrl;
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
工具类FileNameCreator的内容
public static String creatRandomName(String url,String fileName) {
DateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmSSS");
String format = fmt.format(new Date());
// 要保存的地址ַ
url = url + format +fileName;
return url;
}
可以了。
如不想要图片预览中的一大段英文文字,
可以在ckeditor/plugins/image/dialogs/image.js文件中搜索image_previewText,把(b.config.image_previewText||'')单引号中的内容全删了,注意别删多了。
就可以了。