富客戶端技術(shù)(之一) FCKEditor 最流行的文本編輯器
?????C/S體系結(jié)構(gòu)采用了開放的模式在一定的程度上解決了人們對聯(lián)機(jī)辦公等的網(wǎng)絡(luò)應(yīng)用需求,導(dǎo)致了胖客戶端應(yīng)用(fat clients)流行。
????隨著人們對網(wǎng)絡(luò)應(yīng)用需求的進(jìn)一步深入,B/S結(jié)構(gòu)的網(wǎng)絡(luò)應(yīng)用又隨之誕生了,這種結(jié)構(gòu)的網(wǎng)絡(luò)應(yīng)用又稱為瘦客戶端應(yīng)用,只要通過Web瀏覽器,各種處理任務(wù)都可以調(diào)用系統(tǒng)資源來完成,這樣大大簡化了客戶端,減輕了系統(tǒng)維護(hù)與升級的成本和工作量,降低了用戶的總體擁有成本(TCO)。
????今天的網(wǎng)絡(luò)應(yīng)用需要從“什么都用Web瀏覽器”到“根據(jù)情況采用強(qiáng)化客戶端技術(shù)”進(jìn)行本質(zhì)的轉(zhuǎn)變。人們需要更為復(fù)雜而精美的應(yīng)用交互界面,發(fā)布和表現(xiàn)多種復(fù)雜形式的多媒體和內(nèi)容,對形式多樣而豐富的信息內(nèi)容進(jìn)行更好的組織和表現(xiàn),而這些正是目前廣泛應(yīng)用的B/S結(jié)構(gòu)所不能達(dá)到的,于是富客戶端技術(shù)應(yīng)運(yùn)而生。
???作為開源的j2ee技術(shù)中涉及到view層的富客戶端是一種趨勢,而今天要介紹就是其中的一個簡單的開源技術(shù)FCKEditor,運(yùn)用它,可以在你的的頁面展示出類似word頁面的效果,而且無須安裝,只需要在你的項目中引入相關(guān)的jar文件,在需要控件的地方適當(dāng)?shù)恼{(diào)用就可以了。
???下面我做一個簡單的演示給大家
???1.首先,我們先去了解一下FCKEditor http://www.fckeditor.net/
???英文介紹簡單明了:
???This HTML text editor brings to the web many of the powerful functionalities of desktop editors like MS Word.
It's lightweight and doesn't require any kind of installation on the client computer.??
???2.然后去下載相關(guān)的文件,這里我下載的是FCKeditor_2.3.1.zip文件
???3.解壓文件,本人使用的jsp頁面,還需要下載 FCKeditor.Java 的相關(guān)文件
???4.從sample01.jsp開始,使用中來體會學(xué)習(xí)
************************************jsp頁面*********************************************
?
<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
?<head>
??<title>FCKeditor - JSP 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">
function FCKeditor_OnComplete( editorInstance )
{
?window.status = editorInstance.Description ;
}
??</script>
?</head>
?<body>
??<h1>FCKeditor - JSP - Sample 1</h1>
??This sample displays a normal HTML form with an FCKeditor with full features
??enabled.
??<hr>
<!--? 自己的 action 方式? -->
??<form action="sampleposteddata.jsp" method="get" target="_blank">
<%
//以下是修改的關(guān)鍵
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;//初始化的一些配置,第二個參數(shù)EditorDefault就是這個字段的名稱
oFCKeditor.setBasePath( "/FCKeditor/" ) ;//為了尋找相應(yīng)的frame頁面:fckeditor.html;同時傳遞參數(shù);這里設(shè)置為我們需要的路徑!
//oFCKeditor.setBasePath( "/nhoa/FCKeditor/" ) ;//我的例子,就是指明你的文件放在哪個目錄下
oFCKeditor.setValue( "ligang's example!" );//初始化頁面顯示的數(shù)據(jù)
out.println( oFCKeditor.create() ) ;//建立吧,看源碼很簡單!
%>
???<br>
???<input type="submit" value="Submit">
??</form>
?</body>
</html>
************************************jsp頁面***********************************
使用步驟:
(1)項目中import 這個包包:fckEditor.jar(將src的java代碼打包),需要看源碼也可以!
(2)修改你的jsp頁面,在需要添加該效果的地方模仿以上jsp頁面進(jìn)行修改
(3)想想,好象沒有什么事了!
(4)試試吧!
5.分析實(shí)現(xiàn)原理
主要就是oFCKeditor.create()?,通過這個方法建立控件,在源代碼中可以看見
public String create() {
??StringBuffer strEditor=new StringBuffer();
??
??strEditor.append("<div>");
??String encodedValue=HTMLEncode(value);
???if(isCompatible()) {?//瀏覽器版本符合要求產(chǎn)生我們的控件
???strEditor.append("<input type=\"hidden\" id=\"" + instanceName + "\" name=\"" + instanceName + "\" value=\"" + encodedValue + "\">");
??
???strEditor.append(createConfigHTML());
???strEditor.append(createIFrameHTML());
??
??}
??else{//瀏覽器版本不符合要求,產(chǎn)生一個textarea,呵呵,也不失是一種彌補(bǔ)的方式
???strEditor.append("<TEXTAREA name=\"" + instanceName + "\" rows=\"4\" cols=\"40\" style=\"WIDTH: " + width + "; HEIGHT: " + height + "\" wrap=\"virtual\">"+encodedValue+"</TEXTAREA>");
??}
??strEditor.append("</div>");
??return strEditor.toString();
?}
???其實(shí)就是一個servelt向?yàn)g覽器寫一些html語句,其中的createConfigHTML()就是通過配置文件config.js向控件傳遞一些參數(shù),在頁面是通過hidden域來傳遞的,但是自己沒有找到這個文件的位置,希望明白的朋友可以告訴我......
createIFrameHTML()就是建立控件的方法,其中最重要的一個參數(shù)就是sLink,
String sLink=basePath + "editor/fckeditor.html?InstanceName=" + instanceName;它指明了控件數(shù)據(jù)的名稱就是instanceName,它有時在那里被用戶初始化的呢,呵呵,是在構(gòu)造方法里面,F(xiàn)CKeditor 類有一個構(gòu)造方法
?public FCKeditor(HttpServletRequest req, String parInstanceName){
??request=req;
??basePath = request.getContextPath() + "/FCKeditor/";
??instanceName=parInstanceName;
??oConfig = new FCKeditorConfigurations() ;
?}
我們在jsp頁面上,看到
oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;//初始化的一些配置,第二個參數(shù)EditorDefault就是這個
變量
6.到這里,需要我們試用者了解的部分就這些了,剩下的工作就是控件自己實(shí)現(xiàn)了,呵呵,真的很簡單啊
總結(jié):
使用就要做兩件事情:import fckEditor.jar,這個jar包是我自己通過開源的代碼自己編譯后打的
還有就是在需要的地方添加代碼,注意兩個地方,一個是選取合適的構(gòu)造函數(shù)和構(gòu)造函數(shù)參數(shù),還有就是
設(shè)定好自己項目擺放FCKeditor文件的目錄,基本沒有什么問題,今天在工作的項目上使用了一下沒有什么問題.
posted on 2006-09-13 20:14 ericli 閱讀(3767) 評論(4) 編輯 收藏 所屬分類: 應(yīng)用服務(wù)器