富文本編輯器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;
}