富文本编辑器ckeditor的使用

首先需要下载所需要的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的内容

可以了。

如不想要图片预览中的一大段英文文字，

可以在ckeditor/plugins/image/dialogs/image.js文件中搜索image_previewText，把(b.config.image_previewText||'')单引号中的内容全删了，注意别删多了。

就可以了。

文章来源: 富文本编辑器ckeditor的使用

标签

ckeditor