编辑器CKEDITOR使用实例

今天写前台用到了文本编辑器，项目之前用的CKEDITOR，所以我也引用了CKEDITOR，前台主要用了jqgrid和CKEDITOR结合，进行对公告的后台管理，效果如图所示：

点击添加公告弹出带有CKEDITOR的div表单如图：

点击保存就可以保存CKEDITOR中的数据，要注意的是CKEDITOR保存的是标签，通过看数据库就可以看出，保存时他自动给所有样式都加了标签，所以取出使用时才会根据数据库中保存的标签显示不同的文本样式，我用的是SQL Server 数据库中保存该段文本的字段类型是“text”类型的，这样才可以保存标签，防止CKEDITOR不显示样式。

总结一下使用方法：

下载并且引入该插件jar包：

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

添加按钮：

<input type="button" value="添加公告" onclick="openAddAnnouncement();"/>

显示隐藏表单并初始化：

function openAddAnnouncement() {
/* 初始化清空 */
$("#id").val("0");
$("#addGroupShareForm #groupTypeId").val("")
$("#addGroupShareForm #title").val("");
CKEDITOR.instances.content.setData("");
$("#addGroupShareForm #jumpUrl").val("");

$("#saveZcAnnouncementDiv").dialog("open");
}

当然开始时添加页面先不加载，你要是不隐藏就不用设置此段：

$("#saveZcAnnouncementDiv").dialog({
autoOpen : false,
width : 1200,
modal : true,
//draggable: false,resizable: false,
position : [ 'center', 'top' ]
});

要显示的静态页面内容：

<div id="saveZcAnnouncementDiv" title="编辑公告">
<form  id="addGroupShareForm" name="addGroupShareForm" enctype="multipart/form-data"  method="post">
<table border="0" class="grid" id="table1" width="100%">
       <tr>
        <td  >
        <select id="groupTypeId" name="groupTypeId" style="width: 60.5%" ">
 </select> <span style="color: red">*</span>
</td>
</tr>
<tr>
<td>公告标题</td>
<input type="hidden" id="id" name="id" value="">
<td><input type="text" id="title" name="title"  value=""  style="width:200px"/><span style="color: red">*</span></td>
</tr>
<tr>
<td>公告内容</td>
<td><textarea rows="2" cols="5" id="content" name="content"></textarea></td>
</tr>
<tr>
<td>跳转地址</td>
<td><input type="text" id="jumpUrl" name="jumpUrl"  value=""  style="width:200px"/></td>
</tr>
</table>
<div align="center" ><input type="button" id="save" onclick="saveMappingShareData()" value="保存"/></div>
</form>
</div>

点击保存按钮异步调用后台方法：

function saveMappingShareData(){

var title=$("#addGroupShareForm #title").val();
if(title.trim()==""){
$(document).note("add", {
type : "error",
message : "提示：公告标题不能为空！"
});
return;
}
var groupTypeId=$("#addGroupShareForm #groupTypeId").val();
if(groupTypeId.trim()==""){
$(document).note("add", {
type : "error",
message : "提示：活动不能为空！"
});
return;
}
var content=CKEDITOR.instances.content.getData();
var jumpUrl=$("#addGroupShareForm #jumpUrl").val();
var id=$("#id").val();
var r=confirm("您确定要保存数据吗？");
if(!r){
return;
}

$.ajax({
url : "createzcAnnouncement",
type : "POST",
dataType : "json",
   /*timeout : 30000, */
data : {"id":id,"groupTypeId":groupTypeId,"content":content,"title":title,"jumpUrl":jumpUrl},
success : function(data) {
if (data) {
$(document).note("add", {
type : "success",
message : "操作成功！"
});
$("#saveZcAnnouncementDiv").dialog("close");
findData();
} else {
$(document).note("add", {
type : "error",
message : "操作失败！"
});
}
},
error : OnError
});
 
}

全文

<%@ page language="java"  import="java.util.*"  contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>




  
			
		
	 href="../../style/css.css" rel="stylesheet" />
   rel="stylesheet" type="text/css" media="screen" href="/resources/style/jquery-ui.css" />
   rel="stylesheet" type="text/css" media="screen" href="/resources/style/ui.multiselect.css" />
   rel="stylesheet" type="text/css" media="screen" href="/resources/style/ui.jqgrid.css" />
   rel="stylesheet" type="text/css" href="/resources/style/jquery-ui-timepicker-addon.css" />
	
  
  
  
  
  
  
  
  
  
   

	
	
		公告标题： 
	    
	    
	    
	         
	    	    
		
  
		
  

		
	
	
	
  

	
   

			
    
 
${zcGroupType.name }  --%>  * 
公告标题

						
       
*
公告内容
跳转地址