05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能
生活随笔
收集整理的這篇文章主要介紹了
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教程学习记录
- 下一篇： 检测到在集成的托管管道模式下不适用的 A