在使用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>