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

这篇文章讲的是在线编辑器功能，之前的部门模块中，增加部门的功能jsp页面起先是这么做的。

aaarticlea/png;base64,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" alt="" width="688" height="175" />

加入在线编辑器之后要达到的效果是：

aaarticlea/png;base64,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" alt="" width="716" height="183" />

采用一个插件，名为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.内容如下
aaarticlea/png;base64,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" alt="" />
(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中的一些内容动态的改变在线编辑器中的内容