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

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

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

    爪哇東南的自留地

    學習探討開源和web開發

    導航

    <2009年3月>
    22232425262728
    1234567
    891011121314
    15161718192021
    22232425262728
    2930311234

    統計

    常用鏈接

    留言簿(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 發的是發的是非得失發

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


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


    網站導航:
     
    主站蜘蛛池模板: 亚洲精品~无码抽插| 在线免费观看色片| 国产AV无码专区亚洲AVJULIA| 深夜福利在线免费观看| 日韩高清在线高清免费| 精品成人一区二区三区免费视频| 国产免费午夜a无码v视频| 国产精品亚洲一区二区三区 | 人与动性xxxxx免费| 天堂亚洲免费视频| 一级白嫩美女毛片免费| 国产午夜亚洲不卡| 久久永久免费人妻精品下载| 亚洲蜜芽在线精品一区| 免费大片黄在线观看yw| 亚洲精品美女久久久久久久| 亚洲高清最新av网站| 最近的2019免费中文字幕| 亚洲精品国产专区91在线| 四虎1515hh永久久免费| 亚洲第一成年免费网站| 国产亚洲精品高清在线| 91麻豆国产免费观看| 亚洲人成无码网站在线观看| 亚洲欧洲日本在线| 99在线免费观看视频| 亚洲日本VA午夜在线电影| 国产亚洲精品福利在线无卡一| 99视频有精品视频免费观看| 亚洲中文字幕一二三四区苍井空 | 亚洲色精品三区二区一区| 亚洲高清成人一区二区三区| a级毛片毛片免费观看永久| 久久精品国产亚洲AV无码娇色| 好爽…又高潮了毛片免费看| 一区二区在线免费视频| 亚洲无圣光一区二区| 亚洲精品无码专区久久同性男| 1000部啪啪毛片免费看| 人妻无码中文字幕免费视频蜜桃| 久久精品国产96精品亚洲|