富文本编辑器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的内容

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||'')单引号中的内容全删了，注意别删多了。

就可以了。