富客戶端技術(之一) FCKEditor 最流行的文本編輯器
?????C/S體系結構采用了開放的模式在一定的程度上解決了人們對聯機辦公等的網絡應用需求,導致了胖客戶端應用(fat clients)流行。
????隨著人們對網絡應用需求的進一步深入,B/S結構的網絡應用又隨之誕生了,這種結構的網絡應用又稱為瘦客戶端應用,只要通過Web瀏覽器,各種處理任務都可以調用系統資源來完成,這樣大大簡化了客戶端,減輕了系統維護與升級的成本和工作量,降低了用戶的總體擁有成本(TCO)。
????今天的網絡應用需要從“什么都用Web瀏覽器”到“根據情況采用強化客戶端技術”進行本質的轉變。人們需要更為復雜而精美的應用交互界面,發布和表現多種復雜形式的多媒體和內容,對形式多樣而豐富的信息內容進行更好的組織和表現,而這些正是目前廣泛應用的B/S結構所不能達到的,于是富客戶端技術應運而生。
???作為開源的j2ee技術中涉及到view層的富客戶端是一種趨勢,而今天要介紹就是其中的一個簡單的開源技術FCKEditor,運用它,可以在你的的頁面展示出類似word頁面的效果,而且無須安裝,只需要在你的項目中引入相關的jar文件,在需要控件的地方適當的調用就可以了。
???下面我做一個簡單的演示給大家
???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.然后去下載相關的文件,這里我下載的是FCKeditor_2.3.1.zip文件
???3.解壓文件,本人使用的jsp頁面,還需要下載 FCKeditor.Java 的相關文件
???4.從sample01.jsp開始,使用中來體會學習
************************************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">
<%
//以下是修改的關鍵
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;//初始化的一些配置,第二個參數EditorDefault就是這個字段的名稱
oFCKeditor.setBasePath( "/FCKeditor/" ) ;//為了尋找相應的frame頁面:fckeditor.html;同時傳遞參數;這里設置為我們需要的路徑!
//oFCKeditor.setBasePath( "/nhoa/FCKeditor/" ) ;//我的例子,就是指明你的文件放在哪個目錄下
oFCKeditor.setValue( "ligang's example!" );//初始化頁面顯示的數據
out.println( oFCKeditor.create() ) ;//建立吧,看源碼很簡單!
%>
???<br>
???<input type="submit" value="Submit">
??</form>
?</body>
</html>
************************************jsp頁面***********************************
使用步驟:
(1)項目中import 這個包包:fckEditor.jar(將src的java代碼打包),需要看源碼也可以!
(2)修改你的jsp頁面,在需要添加該效果的地方模仿以上jsp頁面進行修改
(3)想想,好象沒有什么事了!
(4)試試吧!
5.分析實現原理
主要就是oFCKeditor.create()?,通過這個方法建立控件,在源代碼中可以看見
public String create() {
??StringBuffer strEditor=new StringBuffer();
??
??strEditor.append("<div>");
??String encodedValue=HTMLEncode(value);
???if(isCompatible()) {?//瀏覽器版本符合要求產生我們的控件
???strEditor.append("<input type=\"hidden\" id=\"" + instanceName + "\" name=\"" + instanceName + "\" value=\"" + encodedValue + "\">");
??
???strEditor.append(createConfigHTML());
???strEditor.append(createIFrameHTML());
??
??}
??else{//瀏覽器版本不符合要求,產生一個textarea,呵呵,也不失是一種彌補的方式
???strEditor.append("<TEXTAREA name=\"" + instanceName + "\" rows=\"4\" cols=\"40\" style=\"WIDTH: " + width + "; HEIGHT: " + height + "\" wrap=\"virtual\">"+encodedValue+"</TEXTAREA>");
??}
??strEditor.append("</div>");
??return strEditor.toString();
?}
???其實就是一個servelt向瀏覽器寫一些html語句,其中的createConfigHTML()就是通過配置文件config.js向控件傳遞一些參數,在頁面是通過hidden域來傳遞的,但是自己沒有找到這個文件的位置,希望明白的朋友可以告訴我......
createIFrameHTML()就是建立控件的方法,其中最重要的一個參數就是sLink,
String sLink=basePath + "editor/fckeditor.html?InstanceName=" + instanceName;它指明了控件數據的名稱就是instanceName,它有時在那里被用戶初始化的呢,呵呵,是在構造方法里面,FCKeditor 類有一個構造方法
?public FCKeditor(HttpServletRequest req, String parInstanceName){
??request=req;
??basePath = request.getContextPath() + "/FCKeditor/";
??instanceName=parInstanceName;
??oConfig = new FCKeditorConfigurations() ;
?}
我們在jsp頁面上,看到
oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;//初始化的一些配置,第二個參數EditorDefault就是這個
變量
6.到這里,需要我們試用者了解的部分就這些了,剩下的工作就是控件自己實現了,呵呵,真的很簡單啊
總結:
使用就要做兩件事情:import fckEditor.jar,這個jar包是我自己通過開源的代碼自己編譯后打的
還有就是在需要的地方添加代碼,注意兩個地方,一個是選取合適的構造函數和構造函數參數,還有就是
設定好自己項目擺放FCKeditor文件的目錄,基本沒有什么問題,今天在工作的項目上使用了一下沒有什么問題.
posted on 2006-09-13 20:14 ericli 閱讀(3761) 評論(4) 編輯 收藏 所屬分類: 應用服務器