ASP.NET中FCKEDITOR在線編輯器的用法

更新時(shí)間：2009年12月15日 12:25:51 作者：

FCKEDITOR在線編輯器在asp.net下的使用方法，需要的朋友可以參考下。

你可以將FCKEDITOR放置到任何文件夾,默認(rèn)情況下,將其放入到FCKEDITOR文件夾是最為簡單的方法.如果你放入的文件夾使用別的名稱,請(qǐng)修改配置文件夾中編輯器BasePath參數(shù),如下所示:
oFckeditor.BasePath="/Components/fckeditor/";

另外,FCKEDITOR文件夾中所有以下劃線開頭的文件夾及文件,都是可選的,可以安全的從你的發(fā)布中刪除.它們并不是編輯器運(yùn)行時(shí)必需的

如何將FCKEDITOR整合進(jìn)我的頁面?

由于目前的版本提供的FCKEDITOR僅提供了JAVASCRIPT式的整合,因此,這里僅講述如何應(yīng)用JAVASCRIPT來整合FCKEDITOR到站點(diǎn)中,當(dāng)然,其他各種語言的整合,你可以參考_samples文件夾中的例子來完成
1,假如編輯器已經(jīng)安裝在你的站點(diǎn)的/FCKEDITOR/文件夾下.那么,第一步我們需要做的就是在頁面的HEAD段中放入SCRIPT標(biāo)記以引入JAVASCRIPT整合模塊.例如:
<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>

其中路徑是可更改的

2,現(xiàn)在,FCKEDITOR類已經(jīng)可以使用了.有兩個(gè)方法在頁面中建立一個(gè)FCKEDITOR編輯器:
方法1:內(nèi)聯(lián)方式(建議使用):在頁面的FORM標(biāo)記內(nèi)需要插入編輯器的地方置入以下代碼:
script type="text/javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Create() ;
</script>

方法2:TEXTAREA標(biāo)記替換法(不建議使用):在頁面的ONLOAD事件中,添加以下代碼以替換一個(gè)已經(jīng)存在的TEXTAREA標(biāo)記

<html>
<head>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
</body>
</html>

3.現(xiàn)在,編輯器可以使用了

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

構(gòu)造器:
FCKeditor( instanceName[, width, height, toolbarSet, value] )
instanceName:編輯器的唯一名稱(相當(dāng)于ID)
WIDTH:寬度
HEIGHT:高度
toolbarSet:工具條集合的名稱
value:編輯器初始化內(nèi)容

屬性:
instanceName:編輯器實(shí)例名
width:寬度,默認(rèn)值為100%
height:高度,默認(rèn)值是200
ToolbarSet:工具集名稱,參考FCKCONFIG.JS,默認(rèn)值是Default
value:初始化編輯器的HTML代碼,默認(rèn)值為空
BasePath:編輯器的基路徑,默認(rèn)為/Fckeditor/文件夾,注意,盡量不要使用相對(duì)路徑.最好能用相對(duì)于站點(diǎn)根路徑的表示方法,要以/結(jié)尾
CheckBrowser:是否在顯示編輯器前檢查瀏覽器兼容性,默認(rèn)為true
DisplayErrors:是否顯示提示錯(cuò)誤,默為true;

集合:
Config[Key]=value;
這個(gè)集合用于更改配置中某一項(xiàng)的值,如
oFckeditor.Config["DefaultLanguage"]="pt-br";

方法:
Create()
建立并輸出編輯器

RepaceTextArea(TextAreaName)
用編輯器來替換對(duì)應(yīng)的文本框

如何配置FCKEDITOR?
FCKEDITOR提供了一套用于定制其外觀,特性及行為的設(shè)置集.主配置文件名為Fckconfig.js
你既可以編輯主配置文件,也可以自己定義單獨(dú)的配置文件.配置文件使用JAVASCRIPT語法.

修改后,在建立編輯器時(shí),可以使用以下語法:
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Config['CustomConfigurationsPath'] = '/myconfig.js' ;
oFCKeditor.Create() ;

提醒:當(dāng)你修改配置后,請(qǐng)清空瀏覽器緩存以查看效果

配置選項(xiàng):

AutoDetectLanguage=true/false 自動(dòng)檢測(cè)語言
Basehref="" _fcksavedurl="""" 相對(duì)鏈接的基地址
ContentLangDirection="ltr/rtl" 默認(rèn)文字方向
ContextMenu=字符串?dāng)?shù)組,右鍵菜單的內(nèi)容
CustomConfigurationsPath="" 自定義配置文件路徑和名稱
Debug=true/false 是否開啟調(diào)試功能,這樣,當(dāng)調(diào)用FCKDebug.Output()時(shí),會(huì)在調(diào)試窗中輸出內(nèi)容
DefaultLanguage="" 缺省語言
EditorAreaCss="" 編輯區(qū)的樣式表文件
EnableSourceXHTML=true/false 為TRUE時(shí),當(dāng)由可視化界面切換到代碼頁時(shí),把HTML處理成XHTML
EnableXHTML=true/false 是否允許使用XHTML取代HTML
FillEmptyBlocks=true/false 使用這個(gè)功能,可以將空的塊級(jí)元素用空格來替代
FontColors="" 設(shè)置顯示顏色拾取器時(shí)文字顏色列表
FontFormats="" 設(shè)置顯示在文字格式列表中的命名
FontNames="" 字體列表中的字體名
FontSizes="" 字體大小中的字號(hào)列表
ForcePasteAsPlainText=true/false 強(qiáng)制粘貼為純文本
ForceSimpleAmpersand=true/false 是否不把&符號(hào)轉(zhuǎn)換為XML實(shí)體
FormatIndentator="" 當(dāng)在源碼格式下縮進(jìn)代碼使用的字符
FormatOutput=true/false 當(dāng)輸出內(nèi)容時(shí)是否自動(dòng)格式化代碼
FormatSource=true/false 在切換到代碼視圖時(shí)是否自動(dòng)格式化代碼
FullPage=true/false 是否允許編輯整個(gè)HTML文件,還是僅允許編輯BODY間的內(nèi)容
GeckoUseSPAN=true/false 是否允許SPAN標(biāo)記代替B,I,U標(biāo)記
IeSpellDownloadUrl=""下載拼寫檢查器的網(wǎng)址
ImageBrowser=true/false 是否允許瀏覽服務(wù)器功能
ImageBrowserURL="" 瀏覽服務(wù)器時(shí)運(yùn)行的URL
ImageBrowserWindowHeight="" 圖像瀏覽器窗口高度
ImageBrowserWindowWidth="" 圖像瀏覽器窗口寬度
LinkBrowser=true/false 是否允許在插入鏈接時(shí)瀏覽服務(wù)器
LinkBrowserURL="" 插入鏈接時(shí)瀏覽服務(wù)器的URL
LinkBrowserWindowHeight=""鏈接目標(biāo)瀏覽器窗口高度
LinkBrowserWindowWidth=""鏈接目標(biāo)瀏覽器窗口寬度
Plugins=object 注冊(cè)插件
PluginsPath="" 插件文件夾
ShowBorders=true/false 合并邊框
SkinPath="" 皮膚文件夾位置
SmileyColumns=12 圖符窗列數(shù)
SmileyImages=字符數(shù)組圖符窗中圖片文件名數(shù)組
SmileyPath="" 圖符文件夾路徑
SmileyWindowHeight 圖符窗口高度
SmileyWindowWidth 圖符窗口寬度
SpellChecker="ieSpell/Spellerpages" 設(shè)置拼寫檢查器
StartupFocus=true/false 開啟時(shí)FOCUS到編輯器
StylesXmlPath="" 設(shè)置定義CSS樣式列表的XML文件的位置
TabSpaces=4 TAB鍵產(chǎn)生的空格字符數(shù)
ToolBarCanCollapse=true/false 是否允許展開/折疊工具欄
ToolbarSets=object 允許使用TOOLBAR集合
ToolbarStartExpanded=true/false 開啟是TOOLBAR是否展開
UseBROnCarriageReturn=true/false 當(dāng)回車時(shí)是產(chǎn)生BR標(biāo)記還是P或者DIV標(biāo)記

如何自定義樣式列表呢?
FCKEDITOR的樣式工具欄中提供了預(yù)定義的樣式,樣式是通過XML文件定義的,默認(rèn)的XML樣式文件存在于FCkEditor根文件夾下的FckStyls.xml文件中
這個(gè)XML文件的結(jié)構(gòu)分析如下:
<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image" element="img">
<Attribute name="style" value="padding: 5px" />
<Attribute name="border" value="2" />
</Style >
<Style name="Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style >
<Style name="Title H3" element="h3" />
</Styles>

每一個(gè)STYLE標(biāo)記定義一種樣式,NAME是顯示在下拉列表中的樣式名,ELEMENT屬性指定此樣式所適用的對(duì)象,因?yàn)镕CKEDITOR中的樣式是上下文敏感的,也就是說,選擇不同的對(duì)象,僅會(huì)顯示針對(duì)這類對(duì)象定義的樣式

拼寫檢查

FCKEDITOR 帶了兩種拼寫檢查工具,一種是ieSpell,默認(rèn)情況下使用這種,使用這種方式的拼寫檢查,要求客戶下載并安裝iespell這個(gè)小軟件,另外,也提供 SpellPager的方式來進(jìn)行拼寫檢查,不過,由于SPELLPAGER是由PHP編寫的服務(wù)器端腳本,因此,要求你的WEB服務(wù)器必須支持PHP腳本語言方可
更改拼寫檢查器的方式請(qǐng)參見有關(guān)配置文件的詳細(xì)說明

壓縮腳本

為了提供腳本載入的效率,FCKEDITOR采用以下方法對(duì)腳本盡量壓縮以減少腳本尺寸:
1,移除掉腳本中的注釋
2.移除掉腳本中所有無意義的空白
另外,FCKEDITOR還提供了一個(gè)專門用于壓縮腳本的工具以便你在發(fā)布時(shí)能減小文件尺寸,
你可以將_Packager文件夾中的Fckeditor.Packager.exe復(fù)制到FCKEDITOR根文件夾來運(yùn)行并壓縮腳本

本地化FCKEDITOR
如果FCKEDITOR沒有提供您所需要的語言(實(shí)際上全有了),你也可以自行制作新的語言
,你只需要復(fù)制出EN.JS,然后在其基礎(chǔ)上進(jìn)行翻譯.另外,語言名稱與對(duì)應(yīng)的腳本文件名必須遵循RFC 3066標(biāo)準(zhǔn),但是,需要小寫,例如:Portuguess Language對(duì)應(yīng)的腳本文件名必須為pt.js
如果需要針對(duì)某個(gè)國家的某種語系,則可以在語系縮寫后加上橫線及國家縮寫即可

在使用時(shí),系統(tǒng)會(huì)自動(dòng)偵測(cè)客戶端語系及國別而運(yùn)用適當(dāng)?shù)慕缑嬲Z言.

當(dāng)建立一種新的語言后,你必須在"Edit/lang/fcklanguagemanager.js"中為其建立一個(gè)條目,如下所示:
FCKLanguageManager.AvailableLanguages =
{

en : 'English',
pt : 'Portuguese'
}

需要提醒的是,文件必須保存為UTF-8格式

如何與服務(wù)器端腳本進(jìn)行交互?
請(qǐng)查看例子以得到相關(guān)內(nèi)容

另外,在ASP.NET中以以下步驟使用
1.把FCKEDITOR添中到工具箱
2.托拽FCKEDITOR控件到頁面
3.為其指定名稱
4.FCKEDITOR 類的所有屬性不光可以在代碼中使用,而且可以作為FCKEDITOR控件的屬性直接使用,例如,要改變皮膚,可以在UI頁面中指定 SkinPath="/fckeditor/editor/skins/office2003"即可,其實(shí)FCKEDITOR的ASP.NET版本可以做得更好,你可以找到FCKEDITOR ASP.NET 2.1的源文件,然后修改該控件的設(shè)計(jì),為其暴露更多有用的屬性,重新編譯即可
5,POSTBACK后的數(shù)據(jù),使用FCKEDITOR控件的value屬性獲得
6. 由于默認(rèn)狀態(tài)下,ASP.NET不允許提交含有HTML及JAVASCRIPT的內(nèi)容,因此,你必須將使用FCKEDITOR的頁面的 ValidateRequest設(shè)為false.(<%@page validteRequest="false" %>即可)

1、下載FckEditor 2.4，它主要包括核心文件。

2、下載FckEditor 2.2 .Net ，包括ASP.NET的DLL文件，并且解壓到任意目錄。

3、解壓FckEditor 2.4 壓縮包，將文件夾FCKeditor復(fù)制到網(wǎng)站的根目錄，這里以ASP.NET 2.0的test項(xiàng)目為例，將其復(fù)制到test的根目錄，并且在根目錄下新建uploads目錄用來存放編輯器上傳得文件。

4、修改js配置.打開FCKeditor目錄下的fckconfig.js文件，將FCKConfig.DefaultLanguage的值改為zh-cn 使其的界面語言改變?yōu)楹嗴w中文，_FileBrowserLanguage和_QuickUploadLanguage的值都改為aspx?？蛇x的修改如下，可以修改編輯器的skin,將FCKConfig.SkinPath = FCKConfig.BasePath +'skins/default/' 的default可以該為office2003或者silver。保存修改，關(guān)閉文件。

5、配置web.config.
打開工程的Web. Config文件，修改appSettings元素，配置如下：

<appSettings>

<add key="FCKeditor:BasePath" value="~/FCKeditor/"/>

<add key="FCKeditor:UserFilesPath" value="/FCKPro/Files" />

</appSettings>

設(shè) 置了FCKeditor:BasePath后就不用再每次使用FCKeditor實(shí)例時(shí)指定BasePath屬性了，F(xiàn)CKeditor:UserFilesPath則是制定我們所有上傳的文件的所在目錄。你也許會(huì)問為什么要設(shè)置成/FCKPro/Files這樣而不是~/Files，因?yàn)镕CKeditor使用這個(gè)值來返回你上傳后的文件的相對(duì)路徑到客戶端，~/Files的形式是ASP.NET在服務(wù)可以編譯解釋的，但是在客戶端的靜態(tài)就不懂這是什么了。如果使用~/Files后，那么所有上傳文件的返回路徑都是~/Files形式的，你就會(huì)得到這樣的鏈接這樣的鏈接解果就是路徑為找到。所以才要我們上述那樣設(shè)置，這是在開發(fā)階段，如果在工程完成后發(fā)布時(shí)請(qǐng)記住把/FCKPro/Files改成/Files，道理不說大家也明白，開發(fā)階段VS2005在運(yùn)行項(xiàng)目時(shí)的URL是http://localhost/項(xiàng)目名稱/的形式，發(fā)布后在Server上建立站點(diǎn)，跟路徑就是http://www.abc.com/的形式了，所以發(fā)布后一定要改過來。這些地方是在使用FCKeditor2.2+ASP.NET2.0時(shí)經(jīng)常發(fā)錯(cuò)誤而又莫名其所云的地方。

6、在項(xiàng)目中引用剛才解壓的FCKeditor.NET壓縮包里的FredCK.FCKeditorV2.dll文件。具體位置是 FCKeditor.Net_2.2/bin/release/FredCK.FCKeditorV2.dll

7、注冊(cè)用戶控件.打開test項(xiàng)目的default.aspx頁面，在

程序代碼
<%@Page Language="C#" MasterPageFile="~/Weblog.master"AutoEventWireup="true" CodeFile="article.aspx.cs" Inherits="article"Title="Test FckEditor" %>

下面加入以下代碼

程序代碼
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

然后就可以在default.aspx頁面使用這個(gè)控件了：

程序代碼
<fckeditorv2:fckeditorid="FCKeditor" runat="server" Width="580px" EnableXHTML="true"EnableSourceXHTML="true" basepath="~/FCKeditor/"height="500px"></fckeditorv2:fckeditor>

8、如何取得編輯器中的文本。
該控件有個(gè)屬性是value，它就是獲得編輯器中的文本的。

9、FCKeditor控件的屬性和事件。
具有的屬性列表如下：

AutoDetectLanguage
BaseHref
BasePath
ContentLangDirection
CustomConfigurationsPath
Debug
DefaultLanguage
EditorAreaCSS
EnableSourceXHTML
EnableViewState
EnableXHTML
FillEmptyBlocks
FontColors
FontFormats
FontNames
FontSizes
ForcePasteAsPlainText
ForceSimpleAmpersand
FormatIndentator
FormatOutput
FormatSource
FullPage
GeckoUseSPAN
Height
ID
ImageBrowserURL
LinkBrowserURL
PluginsPath
runat
SkinPath
StartupFocus
StylesXMLPath
TabSpaces
ToolbarCanCollapse
ToolbarSet
ToolbarStartExpanded
UseBROnCarriageReturn
Value
Visible
Width

具體的事件列表如下：

OnDataBinding
OnDisposed
OnInit
OnLoad
OnPreRender
OnUnload

10、其他

官方網(wǎng)站的support上提到，如果使用asp.net2.0和theme，那么需要打開\editor\filemanager\upload \aspx\upload.aspx和\editor\filemanager\browser\default\connectors\aspx \connector.aspx文件，并且在第一行中加入Theme="" 。比如

程序代碼
<%@ Page language="c#" Inherits="FredCK.FCKeditorV2.FileBrowserConnector" AutoEventWireup="false" Theme="" %>

性能

首先,FCKEDITOR的性能是非常好的,用戶只需很少的時(shí)間就可以載入FCKEDITOR所需文件.對(duì)于其他在線編輯器來說,這幾乎是個(gè)很難解決的難題,因?yàn)樵陂_啟編輯器時(shí)需要裝載太多的文件.比如CUTEEDITOR,雖然功能比FCKEDITOR還要強(qiáng)大,可是,它本身也夠龐大了,至于 FREETEXTBOX等,其易用性與FCKEDITOR相比,尚有差距,可以說,FCKEDITOR是一個(gè)別具匠心的在線編輯器,它里面融入了作者高深的面向?qū)ο蟮腏AVASCRIPT功力,集易用性與強(qiáng)大的功能與一體.

.與編輯器相關(guān)的所有圖像,腳本以及調(diào)用頁
.語言文件
.編輯器的皮膚文件
.工具樣的貼圖等

這些將導(dǎo)致在服務(wù)器和客戶端間產(chǎn)生相當(dāng)?shù)牧髁?如果有許多文件被調(diào)用,那么即便每個(gè)文件很小.也會(huì)讓用戶等得不耐煩.

在2.0版中,開發(fā)人員有兩種方法來解決這個(gè)問題.
那就是指定裝載順序和腳本壓縮

裝載順序
從2.0版開始,編輯器按以下步驟裝載資源:
.基本頁(就是編輯器所在頁)以及裝入編輯器的JS腳本
.用來建立編輯器的腳本
.編輯器的語言和皮膚.
.建立編輯器.
.載入預(yù)置的編輯文檔內(nèi)容.
.從現(xiàn)在開始,用戶可以閱讀和編輯文檔了,不過,拖拽支持以及工具欄都是不可用的
.載入編輯器引擎腳本
.建立工具欄,并且可用
.從現(xiàn)在開始,編輯器的所有功能都已經(jīng)完整
.載入工具欄圖標(biāo)

腳本壓縮

在打包任何新版本時(shí),編輯器的JS腳本將會(huì)進(jìn)行預(yù)處理.預(yù)處理步驟如下:
.移除所有代碼注釋
.移除所有無用的空白字符.
.將腳本合并成幾個(gè)文件

使用上面的方法,我們可以將腳本文件的大小壓縮到原來的50%.
壓縮后,原始的代碼仍然存在于一個(gè)名為_Source的文件夾中

如何打包?
編輯器已經(jīng)自帶了打包程序,它位于FCKEDITOR的根文件夾中_PACKAGER文件夾中,名為Fckeditor.Packager.exe,將其復(fù)制到FCKEDITOR根文件夾中并運(yùn)行,即可自動(dòng)將JS腳本打包并壓縮
需要注意的是該程序是一個(gè).NET程序,必須安裝.NET FRAMEWORK才能使用

想要獲取支持?
如果你捐贈(zèng)15000歐元,你就可以獲得1年的免費(fèi)技術(shù)支持(比較貴的說,相當(dāng)于人民幣15萬,不過西歐的費(fèi)用相當(dāng)驚人)

如何安裝?

1.下載最新版的FCKEDITOR
2.解壓縮到你的站點(diǎn)根文件夾中名為FCKEDITOR的文件夾中(名稱必須為FCKEDITOR,因?yàn)榕渲梦募幸呀?jīng)使用此名稱來標(biāo)示出FCKEDITOR的位置)
3.現(xiàn)在,編輯器就可以使用了,如果想要查看演示,可以按下面方法訪問:

--------------------------------------------------------

附：

一、如何設(shè)置上傳文件語言

把FCKeditor根目錄下面的fckconfig.js文件里

var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php

這兩行中改成您所需要調(diào)用的編輯器語言，如用asp.net則改為aspx；

二、解決中文的問題:
在web.config中加入:
<globalization requestEncoding="GB2312" responseEncoding="GB2312"/>
這樣設(shè)置后可以顯示中文的文件，但URL地址也是中文的；
如果服務(wù)器對(duì)中文地址的解析不好，可能導(dǎo)致圖片無法瀏覽；
所以修改：editor\filemanager\browser\default\frmresourceslist.html
中的OpenFile函數(shù)，把
window.top.opener.SetUrl( fileUrl ) ;
修改為:
window.top.opener.SetUrl( escape(fileUrl) ) ;

三.設(shè)置上傳的目錄：
1:在web.config中設(shè)置:
<appSettings>
<add key="FCKeditor:UserFilesPath" value="/fck/UpLoad/" />
</appSettings>

2:在Session中設(shè)置:
在editor\filemanager\browser\default\connectors\aspx\connector.aspx中加入以下代碼:
<script runat="server" language="C#">
protected override void OnInit(EventArgs e)
{
Session["FCKeditor:UserFilesPath"] = "/fck/UpLoad1/";
}
</script>

附：如何在asp.net中動(dòng)態(tài)設(shè)置上傳圖片的路徑？

1.在javascript中修改FCKConfig.ImageBrowserURL的值，修改方式如下：
FCKConfig.ImageBrowserURL += "?Path=要上傳的文件路徑";
如:要把文件上傳到站點(diǎn)根目錄的UploadFile文件夾中，則設(shè)置為：
FCKConfig.ImageBrowserURL += "?Path=/UploadFile";
2.在"editor\filemanager\browser\default\connectors\aspx\connector.aspx"文件最后中增加以下程序：
<script runat="server" language="C#">
protected override void OnInit(EventArgs e)
{
if( Request.QueryString["Path"]==null ){
Session["FCKeditor:UserFilesPath"] = "/UpLoadFiles/"; //設(shè)置默認(rèn)值
}else{
Session["FCKeditor:UserFilesPath"] = Request.QueryString["Path"];
}
}
</script>

您可能感興趣的文章: