这篇文章讲的是在线编辑器功能，之前的部门模块中，增加部门的功能jsp页面起先是这么做的。
加入在线编辑器之后要达到的效果是：
采用一个插件，名为FCKeditor-v2.6.3。要理解一个插件，要先从插件的例子开始，打开下载包里面的Fckeditor-v2.3.6->fckeditor->_samples->default.html。
这个是FCKeditor-v2.6.3插件的实例。default.html里面是这么写的。
<html>
<head>
<title>FCKeditor - Samples</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
</head>
<frameset rows="60,*">
<frame src="sampleslist.html" noresize scrolling="no">
<frame name="Sample" src="html/sample01.html" noresize>
</frameset>
</html>
上面的红色的代码是主要代码，<frame src="sampleslist.html" noresize scrolling="no">这行代码主要是展现一个列表的效果，这个不是主要的。最主要的代码是
<frame name="Sample" src="html/sample01.html" noresize>。
我们打开他的代码html/sample01.html看一下。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>FCKeditor - Sample</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="noindex, nofollow" /> <link href="../sample.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../../fckeditor.js"></script> </head> <body> <h1> FCKeditor - JavaScript - Sample 1 </h1> <div> This sample displays a normal HTML form with an FCKeditor with full features enabled. </div> <hr /> <form action="../php/sampleposteddata.php" method="post" target="_blank"> <script type="text/javascript"> <!-- // Automatically calculates the editor base path based on the _samples directory. // This is usefull only for these samples. A real application should use something like this: // oFCKeditor.BasePath = '/fckeditor/' ; // '/fckeditor/' is the default value. var sBasePath = document.location.href.substring(0,document.location.href.lastIndexOf('_samples')) ; var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ; oFCKeditor.BasePath = sBasePath ; oFCKeditor.Height = 300 ; oFCKeditor.Value = '<p>This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.</p>' ; oFCKeditor.Create() ; //--> </script> <br /> <input type="submit" value="Submit" /> </form> </body> </html>
<script type="text/javascript" src="../../fckeditor.js"></script>这句代码很重要。引入了fckeditor.js。里面有最核心的函数->var FCKeditor = function( instanceName, width, height, toolbarSet, value )
介绍好了FCKeditor之后，我们看一下FCKeditor在这个项目中的应用。项目结构如下：
1.我们写一个JQuery插件，命名为Jquery-fackeditor.js.内容如下
(function(jQuery){
//这里写具体的代码
})(jQuery);
这是JQuery插件的固定格式。在中间写具体的代码。中间的代码是仿照那个官方给的例子，default.html->sample01.html,仿照sample01.html写。
2.department_add.js，内容为：
$().ready(function(){
//表示页面加载完之后就执行这个函数
$.fckeditor("description");
});
这个department_add.js的作用是当页面加载好之后，会自动执行 $.fckeditor("description")这个函数。其实这个department_add.js最后都是要加入到add.js(增加部门的jsp页面)
这解释一下为什么写成 $.fckeditor("description");这么写是调用var FCKeditor = function( instanceName, width, height, toolbarSet, value )函数里面的instanceName是
"description"，为什么写成description呢？因为在add.js里面的 <td> <s:textarea name="description" class="TextareaStyle"></s:textarea>。我们要做的就是把textarea这个插件
给替换掉。;/构造函数的参数和textarea中的name属性的值保持一致。
给出add.js的代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/jsp/common/common.jsp" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!-- 加载核心的fckeditor.js --> <script language="javascript" src="${pageContext.request.contextPath}/fckeditor/fckeditor.js"></script> <!-- 加载我们自己写的插件 --> <script language="javascript" src="${pageContext.request.contextPath}/js/jquery-fackeditor.js"></script>
<!-- 加载这个js之后会执行里面的函数 --> <script language="javascript" src="${pageContext.request.contextPath}/js/department_add.js"></script> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>部门列表</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <!-- 标题显示 --> <div id="Title_bar"> <div id="Title_bar_Head"> <div id="Title_Head"></div> <div id="Title"><!--页面标题--> <img border="0" width="13" height="13" src="${pageContext.request.contextPath}/css/images/title_arrow.gif"/> 部门信息 </div> <div id="Title_End"></div> </div> </div> <!--显示表单内容--> <div id=MainArea> <s:form action="DepartmentAction_add.action" method="Post"> <div class="ItemBlock_Title1"><!-- 信息说明<DIV CLASS="ItemBlock_Title1"> <IMG BORDER="0" WIDTH="4" HEIGHT="7" SRC="../style/blue/images/item_point.gif" /> 部门信息 </DIV> --> </div> <!-- 表单内容显示 --> <div class="ItemBlockBorder"> <div class="ItemBlock"> <table cellpadding="0" cellspacing="0" class="mainForm"> <tr><td>部门名称</td> <!-- tr标签代表一行 --> <!-- td代表行中的一列 --> <td> <s:textfield name="dname"caaClass="InputStyle"></s:textfield> </td></tr> <tr><td>职能说明</td> <td> <s:textarea name="description" class="TextareaStyle"></s:textarea> </td> </tr> </table> </div> </div> <!-- 表单操作 --> <div id="InputDetailBar"> <input type="image" src="${pageContext.request.contextPath}/css/images/save.png"/> <a href="javascript:history.go(-1);"><img src="${pageContext.request.contextPath}/css/images/goBack.png"/></a> </div> </s:form> </div> <div class="Description"> 说明：<br /> 1，上级部门的列表是有层次结构的（树形）。<br/> 2，如果是修改：上级部门列表中不能显示当前修改的部门及其子孙部门。因为不能选择自已或自已的子部门作为上级部门。<br /> </div> </body> </html>
总结如下：
步骤
* 应该导入fckeditor.js
* 写js代码
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;//构造函数的参数和textarea中的name属性的值保持一致
oFCKeditor.BasePath = "fckeditor/";
oFCKeditor.ReplaceTextarea() ;
* 说明
* 创建一个在线编辑器，并且替换掉textarea
* 构造器函数的参数是textarea中name属性的值
* BasePath的路径指向fckeditor的下一级
* 在fckeditor/中有一个fckconfig.js，这个js是做配置用的
FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath + "myconfig.js"
用户可以把自定义的匹配写在myconfig.js
可以通过改变myconfig.js中的一些内容动态的改变在线编辑器中的内容