当前位置：
首页 >
05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能
发布时间：2025/3/20
58
豆豆
生活随笔
收集整理的这篇文章主要介绍了
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中的一些内容动态的改变在线编辑器中的内容
总结
以上是生活随笔为你收集整理的05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 廖雪峰javascript教程学习记录
- 下一篇： 搭建一个jupyter站点做数据分析吧