CKEditor富文本在项目中的应用

我们的项目需要实现一个知识库内容的维护和展示功能。原来是以Word文档进行维护的，现在希望能够条目化到数据库中，后台进行维护管理，前台用户登录网站后查看知识库地内容。我们采用了CKEditor进行数据的维护工作，前台直接把HTML的文件流在JSP页面中展示，提供问题的模糊搜索功能。接下来简单阐述一下我们的实现方案。

CKEditor实现后台内容管理工作

CKEditor是一个专门使用在网页上的开源的富文本编辑器，我们的项目使用它来实现富文本的编辑功能。我们的知识库数据由管理员一条一条的通过后台系统维护到数据库中。知识库的内容直接从Word文档中粘贴到CKEditor中，所有Word的格式将保留。CKEditor会自动把Word文字转换为HTML格式的数据，数据库我们使用BLOB字段来存取HTML流。CKEditor的插件下载

下面贴一小段CKEditor的使用代码。

读CKEditor的值

//适应不同编辑模式和firefox浏览器
var oEditor =FCKeditorAPI.GetInstance("body");
if(oEditor.EditorDocument!=null){
	body= oEditor.EditorDocument.body.innerHTML;
}else if (typeof(oEditor.EditingArea) != 'undefined'  
	&& typeof(oEditor.EditingArea.Textarea) != 'undefined'){
		if(window.navigator.userAgent.indexOf("MSIE")>=1){
			    		
			body=oEditor.EditingArea.Textarea.innerText;
		}else{
			    		
			 body=oEditor.EditingArea.Textarea.value;
		     }
}

赋值给CKEditor

FCKeditorAPI.GetInstance('body').EditorDocument.body.innerHTML = obj.body;

我们后台管理是在ExtJS中进行开发的，所以以上都是JS代码。Java代码实现把这些数据Select或Insert到数据库中，具体不表。

JSP前台展示知识库内容

由于CKEditor存入数据库的是HTML的流，我们前台只需要读取出来，然后加载到JSP页面中就实现了前台的展示功能。

	public void getReportDetail(){
		HttpServletRequest request = getRequest();
		HttpServletResponse response = getResponse() ;
		String docId = request.getParameter("id") ;
		Long id = null ;
		String content = "" ;
		try{
			id = Long.valueOf(Base64.decode(docId)) ;
			content = new String(resourceService.getDocContent(id),"GBK") ;
		}catch (Exception e) {
		}
		BeanUtil.printStr(response, content) ;
	}

前台用JQuery把Data加载到界面上

    function view(el,id){
        $.ajax({
	            url:contextPath+"/jsp/cms/getReportDetail.do" ,
	            data:{id:id},
	            success: function(data){
		            $("#stable").hide();
		            $("#report_mid").slideUp();
	                $("#cot h2").html($(el).attr("title")) ;
	                $("#cot .date").html($(el).next("strong").html()) ;
	                $("#cot p").html(data) ;
	                $("#cot").slideDown() ;
	             }
            });
     }