05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能

这篇文章讲的是在线编辑器功能，之前的部门模块中，增加部门的功能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中的一些内容动态的改变在线编辑器中的内容