主頁 > 知識庫 > ASP.NET中FCKEDITOR在線編輯器的用法

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

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

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

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

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

其中路徑是可更改的

2,現(xiàn)在,FCKEDITOR類已經(jīng)可以使用了.有兩個方法在頁面中建立一個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事件中,添加以下代碼以替換一個已經(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:編輯器實例名
width:寬度,默認(rèn)值為100%
height:高度,默認(rèn)值是200
ToolbarSet:工具集名稱,參考FCKCONFIG.JS,默認(rèn)值是Default
value:初始化編輯器的HTML代碼,默認(rèn)值為空
BasePath:編輯器的基路徑,默認(rèn)為/Fckeditor/文件夾,注意,盡量不要使用相對路徑.最好能用相對于站點根路徑的表示方法,要以/結(jié)尾
CheckBrowser:是否在顯示編輯器前檢查瀏覽器兼容性,默認(rèn)為true
DisplayErrors:是否顯示提示錯誤,默為true;

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

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

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

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

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

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

配置選項:

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

如何自定義樣式列表呢?
FCKEDITOR的樣式工具欄中提供了預(yù)定義的樣式,樣式是通過XML文件定義的,默認(rèn)的XML樣式文件存在于FCkEditor根文件夾下的FckStyls.xml文件中
這個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>

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

拼寫檢查

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

壓縮腳本

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

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

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

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

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

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

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

另外,在ASP.NET中以以下步驟使用
1.把FCKEDITOR添中到工具箱
2.托拽FCKEDITOR控件到頁面
3.為其指定名稱
4.FCKEDITOR 類的所有屬性不光可以在代碼中使用,而且可以作為FCKEDITOR控件的屬性直接使用,例如,要改變皮膚,可以在UI頁面中指定 SkinPath="/fckeditor/editor/skins/office2003"即可,其實FCKEDITOR的ASP.NET版本可以做得更好,你可以找到FCKEDITOR ASP.NET 2.1的源文件,然后修改該控件的設(shè)計,為其暴露更多有用的屬性,重新編譯即可
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項目為例，將其復(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實例時指定BasePath屬性了，F(xiàn)CKeditor:UserFilesPath則是制定我們所有上傳的文件的所在目錄。你也許會問為什么要設(shè)置成/FCKPro/Files這樣而不是~/Files，因為FCKeditor使用這個值來返回你上傳后的文件的相對路徑到客戶端，~/Files的形式是ASP.NET在服務(wù)可以編譯解釋的，但是在客戶端的靜態(tài)就不懂這是什么了。如果使用~/Files后，那么所有上傳文件的返回路徑都是~/Files形式的，你就會得到這樣的鏈接這樣的鏈接解果就是路徑為找到。所以才要我們上述那樣設(shè)置，這是在開發(fā)階段，如果在工程完成后發(fā)布時請記住把/FCKPro/Files改成/Files，道理不說大家也明白，開發(fā)階段VS2005在運行項目時的URL是http://localhost/項目名稱/的形式，發(fā)布后在Server上建立站點，跟路徑就是http://www.abc.com/的形式了，所以發(fā)布后一定要改過來。這些地方是在使用FCKeditor2.2+ASP.NET2.0時經(jīng)常發(fā)錯誤而又莫名其所云的地方。

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

7、注冊用戶控件.打開test項目的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頁面使用這個控件了：

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

8、如何取得編輯器中的文本。
該控件有個屬性是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的性能是非常好的,用戶只需很少的時間就可以載入FCKEDITOR所需文件.對于其他在線編輯器來說,這幾乎是個很難解決的難題,因為在開啟編輯器時需要裝載太多的文件.比如CUTEEDITOR,雖然功能比FCKEDITOR還要強大,可是,它本身也夠龐大了,至于 FREETEXTBOX等,其易用性與FCKEDITOR相比,尚有差距,可以說,FCKEDITOR是一個別具匠心的在線編輯器,它里面融入了作者高深的面向?qū)ο蟮腏AVASCRIPT功力,集易用性與強大的功能與一體.

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

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

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

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

腳本壓縮

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

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

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

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

如何安裝?

1.下載最新版的FCKEDITOR
2.解壓縮到你的站點根文件夾中名為FCKEDITOR的文件夾中(名稱必須為FCKEDITOR,因為配置文件中已經(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ù)器對中文地址的解析不好，可能導(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中動態(tài)設(shè)置上傳圖片的路徑？

1.在javascript中修改FCKConfig.ImageBrowserURL的值，修改方式如下：
FCKConfig.ImageBrowserURL += "?Path=要上傳的文件路徑";
如:要把文件上傳到站點根目錄的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>

您可能感興趣的文章:

Win10中VC2013安裝Unit test組件出現(xiàn)問題解決方案
Unity3d獲取系統(tǒng)時間
unity3d調(diào)用手機或電腦攝像頭
Unity3D動態(tài)對象優(yōu)化代碼分享
Unity3D中腳本的執(zhí)行順序和編譯順序
asp.net ckeditor編輯器的使用方法
ASP.NET網(wǎng)站使用Kindeditor富文本編輯器配置步驟
VS2017做為Unity3D的腳本編輯器需要的最精簡組件

標(biāo)簽：沈陽滄州新疆長治上海樂山紅河河南

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《ASP.NET中FCKEDITOR在線編輯器的用法》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

佳木斯湛栽影视文化发展公司

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

QQ咨詢

電話咨詢