在使用ckeditor的时候需要引入相关的js文件，下面是根据曾经做过的项目进行的讲解。
下面是一个实际项目中的一个jsp页面代码，从整体上来了解一下对于刚接触的人来说比较好理解：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>公告模板</title>
<t:base type="jquery,easyui,tools,ckfinder,ckeditor,DatePicker"></t:base>
<script type="text/javascript" src="scripts/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="plug-in/ckeditor_new/ckeditor.js"></script>
<script type="text/javascript" src="plug-in/ckfinder/ckfinder.js"></script>
<script>UEDITOR_HOME_URL='<%=path%>/scripts/Formdesign/js/ueditor/';</script>
<script type="text/javascript" charset="utf-8" src="scripts/Formdesign/js/ueditor/ueditor.config.js?2023"></script>
<script type="text/javascript" charset="utf-8" src="scripts/Formdesign/js/ueditor/ueditor.all.js?2023"> </script>
<script type="text/javascript">
</script>
</head>
<body>
<t:formvalid formid="formobj" dialog="true" usePlugin="password" layout="table" action="tplTemplateController.do?doAdd"
tiptype="1">
<!--
隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用
（隐藏只是在网页页面上面不显示输入框，但是虽然隐藏了，还是具有form传值功能。
一般用来 传值，而不必让用户看到。）
-->
<input id="id" name="id" type="hidden" value="${tplNoticePage.id }">
<input id="code" name="code" type="hidden" value="${tplNoticePage.code }">
<input id="type" name="type" type="hidden" value="${tplNoticePage.type }">
<input id="updateBy" name="updateBy" type="hidden" value="${tplNoticePage.updateBy }">
<table style="width: 950px;height:650px;" cellpadding="0" cellspacing="1" class="formtable">
<tr>
<td class="td-cell-label wp20" nowrap>模板名称:</td>
<td class="value td-cell_editable" colspan="3">
<input id="title" name="title" class="inputxt wp40" type="text" datatype="*1-20" errormsg="内容不能超过20位！" />
<label class="Validform_label" hidden="true">模板名称</label>
<span style="color: red;">*</span>
<span class="Validform_checktip" ></span>
</td>
</tr>
<tr>
<td align="right"><label class="Validform_label">内容:</label></td>
<td class="value"><t:ckeditor name="content" isfinder="true" value="" type='height:400'></t:ckeditor></td>
</tr>
<tr>
<td class="td-cell-label wp20" nowrap>备注:</td>
<td class="value td-cell_editable" colspan="3">
<textarea id="remark" name="remark" class="inputxt wp40" type="text" datatype="*0-500" sucmsg=" " errormsg="内容不能超过500位！" ></textarea></td>
</tr>
<!-- 这是添加一个默认的状态 -->
<tr>
<td class="td-cell-label wp20" nowrap>状态:</td>
<td class="value td-cell_editable" colspan="3">
<t:dictSelect field="status" typeGroupCode="activated_deactivated" defaultVal="1" hasLabel="false"></t:dictSelect>
<label class="Validform_label" hidden="true">状态</label>
<span style="color: red;">*</span>
<span class="Validform_checktip" ></span>
</td>
</tr>
<%--
<!-- 下面是代码可通过鼠标拖拽使得内容的输入框变大，这是可编辑文本框 -->
<tr>
<td class="td-cell-label wp20" nowrap>内容:</td>
<td class="value td-cell_editable" colspan="3">
<t:ckeditor name="content" isfinder="true" value="" type='height:400,width=40px' ></t:ckeditor>
<label class="Validform_label" hidden="true">内容</label>
<span style="color: red;">*</span>
<span class="Validform_checktip" ></span>
</td>
</tr> --%>
<%-- <tr>
<td align="left"><label class="Validform_label">内容:</label></td>
<td class="value"><t:ckeditor name="content" isfinder="true" value="" type='height:400'></t:ckeditor></td>
</tr> --%>
<%--
<!-- 这个是获取那种输入框可以通过鼠标拖拽来改变大小的输入框 -->
<tr>
<td class="td-cell-label wp20" nowrap>内容:</td>
<td class="value td-cell_editable" colspan="3">
<t:ckeditor name="content" isfinder="true" value="" type='height:200,width:400px'></t:ckeditor>
<label class="Validform_label" hidden="true">内容</label>
</td> --%>
<%--
<!-- 下面是代码可通过鼠标拖拽使得内容的输入框变大，这是可编辑文本框 -->
<tr>
<td class="td-cell-label wp20" nowrap>备注:</td>
<td class="value td-cell_editable" colspan="3">
<t:ckeditor name="remark" isfinder="true" value="" type='height:400,width=40px' ></t:ckeditor>
<label class="Validform_label" hidden="true">备注</label>
<span style="color: red;">*</span>
<span class="Validform_checktip" ></span>
</td>
</tr> --%>
<!--
<tr>
<td align="center">是否默认</td>
<td class="value td-cell_editable" colspan="3">
<input id="isDefaultY" name="isDefault" type="radio" value="1"> 是
<input id="isDefaultN" name="isDefault" type="radio" value="0"> 否 <span class="Validform_checktip"></span>
</td>
</tr>
<tr>
<td class="td-cell-label wp20" nowrap>评分办法:</td>
<td class="value td-cell_editable" colspan="3">
<input id="reviewRule" name="reviewRule" class="inputxt wp40" type="text" datatype="*1-300" errormsg="内容不能超过300位！" />
<label class="Validform_label" hidden="true">评分办法</label>
<span style="color: red;">*</span>
<span class="Validform_checktip" ></span>
</td>
</tr>
-->
<!--
<tr>
<td class="td-cell-label wp20" nowrap>评审计划类别:</td>
<td class="value td-cell_editable" colspan="3">
<t:dictSelect extendJson="{'style':'width: 223.067px'}" field="reviewType" typeGroupCode="reviewType" datatype="*" hasLabel="false" ></t:dictSelect>
<label class="Validform_label" hidden="true">评审计划类别</label>
<span style="color: red;">*</span>
<span class="Validform_checktip" ></span>
</td>
</tr>
<tr>
<td class="td-cell-label wp20" nowrap>是否需要专家打分:</td>
<td class="value td-cell_editable" colspan="3">
<t:dictSelect extendJson="{'style':'width: 223.067px'}" field="reviewType" typeGroupCode="reviewType" datatype="*" hasLabel="false" ></t:dictSelect>
<label class="Validform_label" hidden="true">是否需要打分</label>
<span style="color: red;">*</span>
<span class="Validform_checktip" ></span>
</td>
</tr>
-->
<!--
<tr>
<td class="td-cell-label wp20" >编码:</td>
<td class="value td-cell_readonly" colspan="3" >
自动生成
</td>
</tr>
-->
</table>
</t:formvalid>
<!-- 下面是获得可扩展输入框的代码以及插件，$(function(){}); 方法表示在页面加载的时候就开始执行。<script src="scripts/ace/js/jquery.autosize.js"></script>是引入插件.-->
<script src="scripts/ace/js/jquery.autosize.js"></script>
<script type="text/javascript">
$(function(){
$('textarea').autosize();
});
</script>
</body>
<script src = "webpage/cc/anyo/bass/base/tplTemplate.js"></script>
</html>
注意dictSelect中的typeGroupCode="activated_deactivated" ，它的值根据每个项目中的数据字典的规定来写，defaultVal="1"是定义一个默认值。具体情况根据实际项目来说。
CKeditor的用法在“内容”中已经表达清楚了，如果点击一个编辑按钮进行修改，就需要在编辑界面能够获取到它的值，下面分别是获取ckeditor与dictselect的值的写法：
<tr>
<td align="right"><label class="Validform_label">内容:</label></td>
<td class="value"><t:ckeditor name="content" isfinder="true" value="${tplNoticePage.content}" type='height:400'></t:ckeditor></td>
</tr>
<!-- 这是添加一个默认的状态 -->
<tr>
<td class="td-cell-label wp20" nowrap>状态:</td>
<td class="value td-cell_editable" colspan="3">
<t:dictSelect field="status" typeGroupCode="activated_deactivated" defaultVal="${tplNoticePage.status}" hasLabel="false"></t:dictSelect>
<label class="Validform_label" hidden="true">状态</label>
<span style="color: red;">*</span>
<span class="Validform_checktip" ></span>
</td>
</tr>