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页面增加一个在线编辑器功能相关推荐

传智播客——OA项目实战（四）阿汤哥真情流露
今天是OA的最后一天,讲了很多零碎的东西,后来阿汤哥讲到情深处,向我们毫无保留的研讨自己是人生观和学习方法. 阿汤哥的世界观:万物都需要平衡,在各种平衡中前进看起来慢其实是最快. 阿汤哥的学习方法:暂 ...
2.vue3医疗在线问诊项目 - _登录模块 ==＞代码片段、css变量主题定制、cp-nav-bar组件封装、svg打包精灵图插件、cp-icon组件封装、表单校验、密码登录、短信验证码登录及两者
2.医疗在线问诊项目 - _登录模块 ==> 代码片段.css变量主题定制.cp-nav-bar组件封装.svg打包精灵图插件.cp-icon组件封装.表单校验.密码登录.短信验证码登录及两者的 ...
传智播客技术社区_播客与网络技术的未来
传智播客技术社区 Episode zero? We recorded a test episode of The Versioning Show, and had so much fun doing ...
传智播客php拔高_传智播客第30期PHP基础班视频教程（高清完整版）
传智播客第30期PHP基础班视频教程(高清完整版)--更多资源,课程更新在多智时代 duozhishidai.com 多智时代资源,简介: 教程目录 day1 1html介绍 2html标签基本形式 ...
传智播客全栈_播客：从家庭学生到自学成才的全栈开发人员
传智播客全栈 In this week's episode of the freeCodeCamp podcast, Abbey chats with Madison Kanna, a full-st ...
传智播客java测试题_传智播客Java基础综合测试题
传智播客Java基础综合测试题传智播客Java基础综合测试题第一关 1.动手完成 Java 开发包的安装,并设置环境变量 Path . 2.编写一个程序,要求程序运行后在屏幕上输出: ****** ...
传智播客php拔高_传智播客2017最新php视频课件推荐
PHP("超文本预处理器")是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域.PHP 独特的语法混合了C.Java. ...
传智播客mysql视频_传智播客mysql高清视频教程（41集）
本套课程为传智播客mysql高清视频教程,全套课程有41讲,是mysql入门的优质教材,随着mysql不断发展,现在使用mysql+php做网站已成为主流,如果你想学习动态网页设计,那么建议你选择ph ...
传智播客前端开发_前端开发人员的最佳播客
传智播客前端开发 I am a happy podcast listener. I listen to podcasts when I go walking the dog for an hour, ...

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

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

最新文章

热门文章