FCKEditor使用說明(Csdn博客就是用的這個編輯器)

1. FCKeditor 介紹
FCKeditor 這個開源的HTML 文本編輯器可以讓web 程序擁有如MS Word 這樣強大的編輯功
能.FCKeditor 支持當前流行的瀏覽器如IE 5.5+, Firefox 1.0+, Mozilla 1.3+與Netscape 7+等。

FCKeditor官司方網址:http://www.fckeditor.net/

FCKeditor在線DEMOhttp://www.fckeditor.net/demo

FCKeditor下載直址:http://www.fckeditor.net/download (該版本爲2.3.2),最新版已經是2.4了。

 

2.FCKeditor.java介紹

不能直接在JSP項目中使用,需要FCKeditor.java庫的支持。JAVA

FCKeditor.java是針對對JAVA中使用FCKeditorSimone Chiaretta開發的FCKeditorJAVA實現。

下載地址:http://www.fckeditor.net/download (最近版本爲2.3)

 

3.項目中使用FCKeditor在線編輯器

開發環境:JDK5.0 <!--[if !supportLists]--> Eclipse3.2.1 + WTP1.5.2
 

(2)解壓 FCKeditor_2.3.2.zip包,將其中的 edit 文件夾到項目中的 WebRoot 目錄


(3)解壓 FCKeditor_2.3.2.zip 包,將其中的 fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 文件夾到項目中的 WebRoot 目錄


(4)解壓 FCKeditor.java-2.3.zip 包,將其中的 /web/WEB-INF/lib 下的兩個 jar 文件到項目的 WebRoot/WEB-INF/lib 目錄


(5)解壓 FCKeditor.java-2.3.zip 包,將其中的 /src 下的 FCKeditor.tld 文件到項目的 WebContent/WEB-INF 目錄


(6)刪除 WebContent/edit 目錄下的 _source 文件夾(以“_”開始的文件,在項目中無用)

完成後的目錄結構下如:

 

說明:圖中的input.jsp和display.jsp兩個是我寫的測試集成FCKeditor的JSP文件。

  • 修改WebContent/WEB-INF/web.xml文件,加入FCKeditor的配置信息,如下:

 

<xml version="1.0" encoding="UTF-8"?>   
<web-app id="WebApp_ID" version="2.4"   
    xmlns
="http://java.sun.com/xml/ns/j2ee"   
    xmlns:xsi
="http://www.w3.org/2001/XMLSchema-instance"   
    xsi:schemaLocation
="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">   
    
<display-name>FCKeditor</display-name>   
    
<servlet>   
        
<servlet-name>Connector</servlet-name>   
        
<servlet-class>   
            com.fredck.FCKeditor.connector.ConnectorServlet   
        
</servlet-class>   
        
<init-param>   
            
<param-name>baseDir</param-name>   
            
<!-- 此爲文件瀏覽路徑 -->   
            
<param-value>/UserFiles/</param-value>   
        
</init-param>   
        
<init-param>   
            
<param-name>debug</param-name>   
            
<param-value>true</param-value>   
        
</init-param>   
        
<load-on-startup>1</load-on-startup>   
    
</servlet>   
    
<servlet>   
        
<servlet-name>SimpleUploader</servlet-name>   
        
<servlet-class>   
            com.fredck.FCKeditor.uploader.SimpleUploaderServlet   
        
</servlet-class>   
        
<init-param>   
            
<param-name>baseDir</param-name>   
            
<!-- 此爲文件上傳路徑,需要在WebRoot 目錄下新建 UserFiles 文件夾 -->   
            
<!-- 根據文件的類型還需要新建相關的文件夾 Image、Flash -->   
            
<param-value>/UserFiles/</param-value>   
        
</init-param>   
        
<init-param>   
            
<param-name>debug</param-name>   
            
<param-value>true</param-value>   
        
</init-param>   
        
<init-param>   
            
<!-- 此參數爲是否開啓上傳功能 -->   
            
<param-name>enabled</param-name>   
            
<param-value>false</param-value>   
        
</init-param>   
        
<init-param>   
            
<param-name>AllowedExtensionsFile</param-name>   
            
<param-value></param-value>   
        
</init-param>   
        
<init-param>   
            
<!-- 此參數爲文件過濾,以下的文件類型都不可以上傳 -->   
            
<param-name>DeniedExtensionsFile</param-name>   
            
<param-value>   
                php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi   
            
</param-value>   
        
</init-param>   
        
<init-param>   
            
<param-name>AllowedExtensionsImage</param-name>   
            
<param-value>jpg|gif|jpeg|png|bmp</param-value>   
        
</init-param>   
        
<init-param>   
            
<param-name>DeniedExtensionsImage</param-name>   
            
<param-value></param-value>   
        
</init-param>   
        
<init-param>   
            
<param-name>AllowedExtensionsFlash</param-name>   
            
<param-value>swf|fla</param-value>   
        
</init-param>   
        
<init-param>   
            
<param-name>DeniedExtensionsFlash</param-name>   
            
<param-value></param-value>   
        
</init-param>   
        
<load-on-startup>1</load-on-startup>   
    
</servlet>   
    
<servlet-mapping>   
        
<servlet-name>Connector</servlet-name>   
        
<url-pattern>   
            /editor/filemanager/browser/default/connectors/jsp/connector   
        
</url-pattern>   
    
</servlet-mapping>   
    
<servlet-mapping>   
        
<servlet-name>SimpleUploader</servlet-name>   
        
<url-pattern>   
            /editor/filemanager/upload/simpleuploader   
        
</url-pattern>   
    
</servlet-mapping>   
</web-app>   

注:web.xml中已經加入了一些常用配置的說明。

  • 新建input.jsp文件,內容如下:(注意內容中的 testfck這個id)

(上面不能直接帖HTML的代碼,所以只能帖一個圖片上來,要是有知道如何帖HTML代碼的朋友,請告訴我一下,謝謝)

說明:在JSP中集成FCKeditor <!--[endif]-->JavaScript集成:

如上面內容所示,通過新建一個FCKeditor對象,然後調用該對象的設置方法來設置FCKeditor的各個屬性,最後調用FCKeditorReplaceTextarea()替換HTML頁面中的<textarea>標籤。另外FCKeditor也可以調用它的create()方法來直接在JSP嵌入FCKeditor編輯器。

注:注意上面的oFCKeditor.BasePath = "";用這種方式FCKeditor會去查找它的editor目錄下的fckeditor.html文件,由於我是直接將editor文件夾拷貝到WebContent目錄下,所以將它的BasePath設置爲””,如果您將editor拷貝到其它目錄,請設置相應的BasePath屬性。FCKeditor默認是將其放在fckeditor目錄

(2) <!--[endif]-->使用自定義標籤該方法一定要完成第步:解壓 FCKeditor.java-2.3.zip 包,將其中的 /src 下的 FCKeditor.tld 文件到項目的 WebContent/WEB-INF 目錄

首先在JSP中加入FCKeditor標籤:

<%@ taglib uri=”/WEB-INF/FCKeditor.tld” prefix=”fck” %>

       JSP頁面中加入如下代碼,集成FCKeditor編輯器:

    id="testfck" <!--—注意這裏 -->   
    basePath
="/FCKeditor/"    
    height
="60%"   
    skinPath
="/FCKeditor/editor/skins/default/"    
    toolbarSet
="Default"   
    imageBrowserURL
="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"   
    linkBrowserURL
="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"   
    flashBrowserURL
="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"   
    imageUploadURL
="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"   
    linkUploadURL
="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"   
    flashUploadURL
="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">

 

(10) 新建文件,這個文件比較簡單,只是簡單的顯示從在線編輯器傳遞過來的內容,如下:

<%=request.getParameter("testfck")%>

注意這裏的getParameter(“testfck”),這個”testfck”就是在input.jsp中設置的id

4.FCKeditor類說明

下面是用來在頁面中建立編輯器的FCKEDITOR 類的說明

(1) 構造器:

FCKeditor(instanceName[,width,height,toolbarSet,value])


  • instanceName:編輯器的唯一名稱(相當於ID)

  • WIDTH:寬度

  • HEIGHT:高度

  • toolbarSet:工具條集合的名稱

  • value:編輯器初始化內容


(2) 屬性:

  • instanceName:編輯器實例名

  • width:寬度,默認值爲100%

  • height:高度,默認值是200

  • ToolbarSet:工具集名稱,參考FCKCONFIG.JS,默認值是Default

  • value:初始化編輯器的HTML 代碼,默認值爲空

  • BasePath:編輯器的基路徑,默認爲/Fckeditor/文件夾,注意,儘量不要使用相對路徑.最用相對於站點根路徑的表示方法,要以/結尾

  • CheckBrowser:是否在顯示編輯器前檢查瀏覽器兼容性,默認爲true

  • DisplayErrors:是否顯示提示錯誤,默爲true

(3) 集合:

Config[Key]=value

這個集合用於更改配置中某一項的值,

oFckeditor.Config["DefaultLanguage"]="ptbr"

(4) 方法:

Create()

建立並輸出編輯器

RepaceTextArea(TextAreaName)

用編輯器來替換對應的文本框

5.如何配置FCKEDITOR

FCKEDITOR 提供了一套用於定製其外觀,特性及行爲的設置集.主配置文件名爲Fckconfig.js你既可以編輯主配置文件,也可以自己定義單獨的配置文件.配置文件使用JAVASCRIPT 語法.修改後,在建立編輯器時,可以使用以下語法:

varoFCKeditor=newFCKeditor('FCKeditor1')

oFCKeditor.Config['CustomConfigurationsPath']='/myconfig.js'

oFCKeditor.Create()

提醒:當你修改配置後,請清空瀏覽器緩存以查看效果

配置選項:

AutoDetectLanguage=true/false 自動檢測語言

BaseHref=""相對鏈接的基地址

ContentLangDirection="ltr/rtl"默認文字方向

ContextMenu=字符串數組,右鍵菜單的內容

CustomConfigurationsPath=""自定義配置文件路徑和名稱

Debug=true/false 是否開啓調試功能,這樣,當調用FCKDebug.Output(),會在調試窗中輸出內容

DefaultLanguage=""缺省語言

EditorAreaCss=""編輯區的樣式表文件

EnableSourceXHTML=true/false TRUE ,當由可視化界面切換到代碼頁時,HTML 處理成XHTML

EnableXHTML=true/false 是否允許使用XHTML 取代HTML

FillEmptyBlocks=true/false 使用這個功能,可以將空的塊級元素用空格來替代

FontColors=""設置顯示顏色拾取器時文字顏色列表

FontFormats=""設置顯示在文字格式列表中的命名

FontNames=""字體列表中的字體名

FontSizes=""字體大小中的字號列表

ForcePasteAsPlainText=true/false 強制粘貼爲純文本

ForceSimpleAmpersand=true/false

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章