富文本编辑器CKEditor的使用心得

1.在JSP页面导入脚本文件

<script type="text/javascript" src="plugins/ckeditor/ckeditor.js"></script>

2.写JQuery或JS脚本：

<!--'CONTEXT'是一般表单元素textarea的ID，通过js函数转换成具有配置模板的富文本编辑器-->

$(function() {
    var ckEditorName = CKEDITOR.replace('CONTENT', {
        //不使用自带的配置文件(全局配置配置在config.js中)，在ckeditor文件夹下建立customConfig文件夹，把config.js复制一份,ckeditor会从ckeditor文件夹下开始找
        customConfig : 'customConfig/tb_gov_news.js'
    })
});

3.创建自定义的配置文件tb_gov_news.js放在customConfig文件夹下

CKEDITOR.editorConfig = function(config) {

	config.language = 'zh-cn';
	// 设置宽高
	config.width = 600;
	config.height = 400;
	// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'
	config.image_previewText = ''; // 清空预览区域显示内容
	// 设置提交上传图片的路径
	config.filebrowserImageUploadUrl = 'ckUploadImage.do'; 
	// 当提交包含有此编辑器的表单时，是否自动更新元素内的数据
	config.autoUpdateElement = true;
	config.resize_enabled = true;
	// 设置是使用绝对目录还是相对目录，为空为相对目录
	config.baseHref = '';
	// 编辑器的z-index值
	config.baseFloatZIndex = 10000;
	// 配置工具栏
	config.toolbar = [
	// 加粗 斜体， 下划线 穿过线 下标字 上标字
	[ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript' ],
	// 数字列表 实体列表 减小缩进 增大缩进
	[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent' ],
	// 左对齐 居中对齐 右对齐 两端对齐
	[ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
	// 超链接 取消超链接 锚点
	[],
	// 图片 flash 表格 水平线 表情 特殊字符 分页符
	[ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak' ],
	// 样式 格式 字体 字体大小
	[ 'Styles', 'Format', 'Font', 'FontSize' ], 
	// 文本颜色 背景颜色
	[ 'TextColor', 'BGColor' ],
	// 全屏 显示区块
	[ 'Maximize', 'ShowBlocks', '-' ] ]
};

4.在Controller中实现图片/文件上传的方法映射

    /**
	 * 富文本编辑器图片的异步上传
	 * @param request
	 * @param session
	 * @param response
	 * @return
	 * @throws Exception
	 */
	@RequestMapping(value="ckUploadImage")
	public String ckUploadImage(HttpServletRequest request,HttpSession session,
								HttpServletResponse response) throws Exception {

		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();

		// 上传的图片文件
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest
				.getFile("upload");

		// 当我们设置editorObj.config.filebrowserImageUploadUrl = "新地址"时CKeditor会自动为我们增加几个个url参数：
		//新地址?CKEditor=Text&CKEditorFuncNum=2&langCode=zh-cn   其中CKEditorFuncNum参数需要回传给ckeditor
		String callback = request.getParameter("CKEditorFuncNum");

		int i = file.getOriginalFilename().lastIndexOf(".");
		if (i == -1) {
			out.println("<script type=\"text/javascript\">");
			out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
					+ ",''," + "'文件名不能为空！');");
			out.println("</script>");
			return null;
		}
		String extend = file.getOriginalFilename().substring(i);
		if (!extend.equalsIgnoreCase(".jpg")
				&& !extend.equalsIgnoreCase(".gif")
				&& !extend.equalsIgnoreCase(".bmp")
				&& !extend.equalsIgnoreCase(".png")) {
			out.println("<script type=\"text/javascript\">");
			out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
					+ ",''," + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');");
			out.println("</script>");
			return null;

		}
		long size = file.getSize();
		if (size > 10 * 1024 * 1024) {
			out.println("<script type=\"text/javascript\">");
			out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
					+ ",''," + "'文件大小不得大于10M');");
			out.println("</script>");
			return null;
		}


		// 将文件保存到项目目录下，返回图片保存地址
		String fileName = null;
		String filePath = session.getServletContext().getRealPath("/uploadFiles/goodsDetail");
		fileName = FileUpload.fileUp(file, filePath, UuidUtil.get32UUID());


		if ("".equals(fileName)) {
			out.println("<script type=\"text/javascript\">");
			out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
					+ ",''," + "'上传的文件不能为空');");
			out.println("</script>");
			return null;
		}
		if ("failed".equals(fileName)) {
			out.println("<script type=\"text/javascript\">");
			out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
					+ ",''," + "'文件上传失败，请重试');");
			out.println("</script>");
			return null;
		}

		// 返回“图像”选项卡并显示图片
		//<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(callback, 'http://www.jb51.net/image.jpg', '上传成功');</script>

		out.println("<script type=\"text/javascript\">");
		out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
				+ ",'" +Const.URL+"/uploadFiles/goodsDetail/"+fileName+ "','')");
		out.println("</script>");
		return null;

	}

5.注意事项（避坑提醒）

CKEditor 编辑器是增强过的 textarea 元素,在填写了内容之后，编辑器并不立即把内容更新到原来的 textarea 元素中的,而是等到 submit 事件之前把编辑器的内容更新到 textarea 中。
因此,普通的js验证或是jquery validate验证都获取不到编辑器的值.

这里我遇到的问题是：用Jquery判空时textarea.val()总是为空，填了值也校验不通过。一番检测后发现它每次校验取得值都是前一次textarea的文本值（即未更新），所以在第一次填入（"新增"操作）时的非空校验总是取到空值，验证不通过，无法提交。

解决的办法：

  <!--普通的JQuery校验-->
 if($("#CONTENT").val() == ""){
    alert($("#CONTENT").val())  //显示的是前一次的值
    $("#CONTENT").tips({
			side:3,
		    msg:'请输入内容',
		    bg:'#AE81FF',
		    time:2
    });
	$("#CONTENT").focus();
    return false;
}


  <!--针对于富文本编辑器的校验-->
 if(CKEDITOR.instances.CONTENT.getData() == ""){   

    <!--CKEDITOR.instances.CONTENT.getData():将textarea中当前的值更新同步。
        其中'CONTENT'是 textarea的ID-->

    $("#CONTENT").tips({
			side:3,
		    msg:'请输入内容',
		    bg:'#AE81FF',
		    time:2
    });
	$("#CONTENT").focus();
    return false;
}