编辑器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="添加公告" οnclick="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>