<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    爪哇東南的自留地

    學習探討開源和web開發

    導航

    <2008年12月>
    30123456
    78910111213
    14151617181920
    21222324252627
    28293031123
    45678910

    統計

    常用鏈接

    留言簿(1)

    隨筆分類

    隨筆檔案

    相冊

    收藏夾

    life

    technique

    搜索

    最新評論

    閱讀排行榜

    評論排行榜

    富客戶端技術(之一)   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)  編輯  收藏 所屬分類: 應用服務器

    評論

    # re: 富客戶端技術(之一)   FCKEditor   最流行的文本編輯器 2006-09-13 21:04 wen3062

    關于該控件的中文亂碼問題,請教你是怎么解決的?  回復  更多評論   

    # 怎么打jar包 2008-12-29 09:46 胡強

    新手問一句,下下來的是asp的工程怎么打jar包啊?????
      回復  更多評論   

    # re: 富客戶端技術(之一)   FCKEditor   最流行的文本編輯器[未登錄] 2009-03-09 17:31 apple

    brother ,the asp project can't be to make jar package. the problem is very funny,please don't say this question again!  回復  更多評論   

    # re: 富客戶端技術(之一)   FCKEditor   最流行的文本編輯器 2009-06-04 16:59 發的是發的是非得失發

    熱敷的紛紛 發的是非得失發打分的是非得失發的是發的是發的是非得失法殺得十分實得分  回復  更多評論   


    只有注冊用戶登錄后才能發表評論。


    網站導航:
     
    主站蜘蛛池模板: 亚洲成A∨人片在线观看无码| 小日子的在线观看免费| 亚洲国产成人久久精品动漫| 精品免费国产一区二区| 亚欧色视频在线观看免费| 中国毛片免费观看| 特黄aa级毛片免费视频播放| 亚洲av无码一区二区三区观看| 亚洲AV无码久久精品成人| 久久精品国产亚洲Aⅴ香蕉| 在线观着免费观看国产黄| 一二三四免费观看在线电影| 在线播放免费人成毛片乱码| 国产成人无码精品久久久免费| 亚洲av日韩专区在线观看| 亚洲一区二区三区写真| 亚洲成a人片77777群色| 日韩亚洲Av人人夜夜澡人人爽| 久久亚洲欧洲国产综合| 亚洲AV永久无码精品一区二区国产 | 亚洲欧美中文日韩视频| 亚洲国产成人九九综合| 久久亚洲AV无码精品色午夜| 亚洲精品中文字幕乱码三区| 亚洲无线一二三四区手机| 国产免费69成人精品视频| 日韩免费视频播播| 在线观看永久免费视频网站| 四虎成人精品一区二区免费网站 | 亚洲黄色中文字幕| 亚洲人成电影福利在线播放| 亚洲精品色午夜无码专区日韩| 久久亚洲精品无码播放| 亚洲精品无码永久在线观看你懂的| 中文字幕在线亚洲精品| 亚洲伊人久久精品影院| 亚洲精品无码av人在线观看| 国产亚洲一区二区在线观看| 亚洲国产另类久久久精品小说 | 免费国产高清毛不卡片基地| 男女污污污超污视频免费在线看|