首先,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)在,編輯器就可以使用了,如果想要查看演示,可以按下面方法訪問:
http://<your-site>/FCKeditor/_samples/default.html
注意:你可以將FCKEDITOR放置到任何文件夾,默認(rèn)情況下,將其放入到FCKEDITOR文件夾是最為簡(jiǎn)單的方法.如果你放入的文件夾使用別的名稱,請(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="" 相對(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)下,FCKEDITOR作者并沒有提供特定于ASP.NET的文件上傳及文件瀏覽器,不過,你可以輕易的在FILEMANANGER的ASP.NET文件夾中找到空白的ASP.NET版文件瀏覽器,加入你自己用于瀏覽/上傳的代碼即可
7.由于默認(rèn)狀態(tài)下,ASP.NET不允許提交含有HTML及JAVASCRIPT的內(nèi)容,因此,你必須將使用FCKEDITOR的頁面的ValidateRequest設(shè)為false.(<%@page validteRequest="false" %>即可)
8.FCKEDITOR 1.6版與FCKEDITOR2.0版相差不是很大,不過,2.0版加入了JAVASCRIPT方式
精簡(jiǎn)FCKEDITOR2.0
FCKeditor 2.0版終于出來了,之所以用“終于”這個(gè)詞,是因?yàn)樵谶@一版本上加上了眾望所歸的FLASH插入功能。可以說在所有的在線編輯器中,F(xiàn)CKeditor是目前互聯(lián)網(wǎng)上最好的編輯器,功能強(qiáng)大,支持多種瀏覽器,無平臺(tái)限制,可以和多種WEB語言融合,多語言支持,開源等~~
對(duì)于一個(gè)全新的網(wǎng)站,F(xiàn)CKeditor就可以直接拿過來用了,不需要進(jìn)行什么修改。但是對(duì)于絕大多數(shù)的已有網(wǎng)站而言,F(xiàn)CKeditor的一些設(shè)置并不適合自己的使用,這篇文章旨在告訴你簡(jiǎn)單的修改FCKeditor以方便您的網(wǎng)站的使用。
第一項(xiàng)工作就是對(duì)這個(gè)功能宏大的編輯器進(jìn)行精簡(jiǎn),當(dāng)然是文件精簡(jiǎn)而非功能精簡(jiǎn)化。在這里我以asp版的FCKeditor為例進(jìn)行,進(jìn)入到FCKeditor 2.0文件夾下,先把以“_”為開頭的文件夾統(tǒng)統(tǒng)刪除,這些文件夾里放的是范例或是一些其它工具。其實(shí)也就是只保留editor文件夾、fckconfig.js、fckeditor.asp、fckeditor.js、fckstyles.xml、fcktemplates.xml就可以了,最外層的精簡(jiǎn)化完畢,進(jìn)入到editor文件夾內(nèi),先把“_source”文件夾刪除,這里是一些源文件,對(duì)于使用來說沒什么用處。
進(jìn)入images文件夾,刪除smiley文件夾,些文件是放表情圖標(biāo)的,由于接下來我會(huì)用我自己的表情圖標(biāo),先把他們的刪除,當(dāng)然,如果你想用這里的表情圖標(biāo)那就不要?jiǎng)h掉了。退出 images再進(jìn)入lang文件夾內(nèi),這里的東西可以來個(gè)大清洗了,只保留fcklanguagemanager.js、zh-cn.js、en.js、zh.js這四個(gè)文件,第一個(gè)文件是語言配置文件,有了它才能和fckconfig.js里的設(shè)置成對(duì)對(duì)應(yīng)上相應(yīng)的語言文件,zh-cn.js是簡(jiǎn)體中文語言包,en.js就不用說了吧,zh.js是繁體中文的。怎么樣?一下子少了幾百K,爽吧~
再退出lang文件夾,進(jìn)入skin文件夾,如果你想使用fckeditor默認(rèn)的這種奶黃色,那就把除了default文件夾外的另兩個(gè)文件夾直接刪除,如果想用別的,那就自己考慮了,不過我給你個(gè)建議,如果不想用默認(rèn)的,那就選那個(gè)silver,因?yàn)殂y色也就是灰色和任何顏色配起來都不會(huì)難看,而那個(gè)office2003的皮膚,反正我是非常不喜歡的,并且圖片相對(duì)也比較大,又增加了下載時(shí)間,不要!
精簡(jiǎn)的最后一步,退出skin文件夾,再進(jìn)入filemanager,如果你用的不是最新版的fckeditor的話,那這里就一個(gè)文件夾browser,新版的還有一個(gè)upload文件夾。一個(gè)個(gè)來,先進(jìn)入到filemanager/browser/default/connectors/下,因?yàn)槲沂怯玫腶sp的,所以除asp文件夾外,全部刪除。然后再進(jìn)入filemanager/upload/下,同樣,只留asp文件夾,至此,編輯器的精簡(jiǎn)化已經(jīng)結(jié)束了,接下來,我們對(duì)編輯器進(jìn)行設(shè)置修改。
第一個(gè)修改的文件,也就是fckeditor總配置文件,位于根目錄下的fckconfig.js文件。請(qǐng)根據(jù)下面的列表進(jìn)行(以fckeditor 2.0版的為準(zhǔn)):
找到第20行 FCKConfig.DefaultLanguage = 'en' ;改為 FCKConfig.DefaultLanguage = 'zh-cn' ;設(shè)置默認(rèn)語言為簡(jiǎn)體中文
找到第40行 FCKConfig.TabSpaces = 0 ; 改為FCKConfig.TabSpaces = 1 ; 即在編輯器域內(nèi)可以使用Tab鍵。
如果你的編輯器還用在網(wǎng)站前臺(tái)的話,比如說用于留言本或是日記回復(fù)時(shí),那就不得不考慮安全了,在前臺(tái)千萬不要使用Default的toolbar,要么自定義一下功能,要么就用系統(tǒng)已經(jīng)定義好的Basic,也就是基本的toolbar,
找到第64行:
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview']
] ;
這是我改過的Basic,把圖像功能去掉,把添加鏈接功能去掉,因?yàn)閳D像和鏈接和flash和圖像按鈕添加功能都能讓前臺(tái)頁直接訪問和上傳文件,要是這兒不改直接給你上傳個(gè)木馬還不馬上玩完?但是光這樣還不行,fckeditor還支持編輯域內(nèi)的鼠標(biāo)右鍵功能。
找到 第77行:
FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
加上幾種我們常用的字體 FCKConfig.FontNames = '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
接下來就設(shè)置上傳功能了,還是以ASP為例,其實(shí)fck默認(rèn)的就是asp的,把100行以下的所有被注釋掉的代碼全部刪掉就行,然后再把下面所有有關(guān)于browser.html和upload.asp的后面的?Type=XX都改成Type=YY,其中YY為你想保存文件的文件夾名稱。
而如果你還想用自己的表情圖標(biāo)的話,那跳到131行,改掉那個(gè)表情圖標(biāo)的文件夾地址,以及下面的表情圖標(biāo)的文件名,再下面那三個(gè)數(shù)字是每行顯示表情數(shù)及彈出窗口的寬和高了,這個(gè)的大小要根據(jù)您的表情圖標(biāo)排列的窗口的大小而定了。OK,總配置文件修改結(jié)束。
接下來是編輯器位置的設(shè)置,我的習(xí)慣是把editor放在根目錄下,最開始所述的五個(gè)文件也放在根目錄下(Tips:建議放在根目錄下,并且建議使用時(shí)設(shè)置路徑也采用絕對(duì)路徑,如"/fckeditor/",而我的習(xí)慣的設(shè)置是"/"),這樣有利于fckeditor的更新升級(jí),并且網(wǎng)站下所有文件夾都可以任意調(diào)用,不存在其它文件夾名變了而其它地方就無法使用編輯器的問題。
打開fckeditor.asp文件,找到 sBasePath = "/fckeditor/"改為 sBasePath = "/"
打開fckeditor.js文件,找到 this.BasePath = '/fckeditor/' ;改為 this.BasePath = '/' ;
編輯器域內(nèi)默認(rèn)的顯示字體為12px,而我的主頁默認(rèn)字體為14px,所以看著就很不舒服,想要修改可以通過修改樣式表來達(dá)到要求,打開/editor/css/fck_editorarea.css,把第4行改為 font-size: 14px;即可。
接下來就是上傳文件的設(shè)置了,這個(gè)比較麻煩,請(qǐng)仔細(xì)操作。
打開\editor\filemanager\browser\default\frmresourcetype.html,找到第15行,插入“ ['uploadfile','uploadfile'],”配合上剛才在fckconfig.js里的設(shè)置,那么我的上傳文件路徑就是/uploadfile,當(dāng)然你也可以改成你想要的文件夾,但這里的名稱一定要和fckconfig.js里的那個(gè)“Type=YY”里的YY一致才行。
還沒完,繼續(xù)進(jìn)入到editor\filemanager\browser\default\connectors\asp,打開config.asp,先把ConfigIsEnabled = False改成為ConfigIsEnabled = True,要不是沒法上傳文件的,再把ConfigUserFilesPath = "/UserFile"改成我想要的ConfigUserFilesPath = "/"。
接著在“Set ConfigDeniedExtensions = CreateObject( "Scripting.Dictionary" )”后面加入
ConfigAllowedExtensions.Add "uploadfile", ""
ConfigDeniedExtensions.Add "uploadfile", ""
同理,這里的設(shè)置也是要和上面以及fckconfig.js里面對(duì)應(yīng)的。
還有一個(gè)上傳,就是快速上傳,這個(gè)功能是在fckeditor 2.0里才有的,以前的版本沒這個(gè)功能。進(jìn)入\editor\filemanager\upload\asp,同樣打開config.asp,也同樣的把ConfigIsEnabled = False 設(shè)置成 ConfigIsEnabled = True,我這里把ConfigUserFilesPath = "/UserFiles/"改成我想要的 ConfigUserFilesPath = "/uploadfile/"& Year(Date()) &"-"& Month(Date()) &"/",因?yàn)槲业纳蟼魑募欠旁趗ploadfile文件夾下,并且是按月分開放置的。快速上傳,不會(huì)讓你選擇文件夾,而是通過這里的設(shè)置直接上傳的,這兒設(shè)置如果和前面的設(shè)置配合不好的話,你的文件就會(huì)被上傳得亂七八糟,很不方便管理。接前重復(fù)前一個(gè)config.asp里的操作,在后面加上
ConfigAllowedExtensions.Add "uploadfile", ""
ConfigDeniedExtensions.Add "uploadfile", ""
接下來呢,就講一下如何創(chuàng)建自己的在線編輯器,這里以ASP和JS版的為例,ASP版示例代碼,一般用于后臺(tái)操作:
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = "/"
oFCKeditor.ToolbarSet = "Default"
oFCKeditor.Width = "100%"
oFCKeditor.Height = "400"
oFCKeditor.Value = rs("logbody")
oFCKeditor.Create "logbody"
%>
ASP版的,當(dāng)然只能用在以.asp為擴(kuò)展名的頁面中,如果你在前在fckedito.asp里設(shè)置過BasePath為"/"的話,這里就可以省掉第三行,ASP版的只有一個(gè)Create函數(shù)。建議在修改一篇內(nèi)容時(shí)用ASP版的。
接下來看JS版的:
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'logbody' ) ;
oFCKeditor.BasePath = '/' ;
oFCKeditor.ToolbarSet = 'Basic' ;
oFCKeditor.Width = '100%' ;
oFCKeditor.Height = '400' ;
oFCKeditor.Value = '' ;
oFCKeditor.Create() ;
</script>
BasePath的設(shè)置同上所述,JS版的可用于任何網(wǎng)頁中,甚至用于html頁面,因?yàn)槠涫强蛻舳松傻模@樣的好處就是一可以減小網(wǎng)絡(luò)流量,因?yàn)榫庉嬈魑募恍柘螺d一次,二是可以由客戶端定義什么時(shí)候顯示,由于fckeditor初始化需要一定時(shí)間,在這一點(diǎn)上JS就很有作用了。
另外,JS版的還有一個(gè)功能函數(shù)就是ReplaceTextarea()函數(shù),可以替換指定的TextArea,拿我的網(wǎng)站的日志的回復(fù)部分示例:
<script type="text/javascript">
<!--
function showFCK(){
var oFCKeditor = new FCKeditor( 'fbContent' ) ;
oFCKeditor.BasePath = '/' ;
oFCKeditor.ToolbarSet = 'Basic' ;
oFCKeditor.Width = '100%' ;
oFCKeditor.Height = '200' ;
oFCKeditor.Value = '' ;
//oFCKeditor.Create() ;
oFCKeditor.ReplaceTextarea() ;
//document.blog_feedback.blogsubmit.disabled = '';
document.blog_feedback.blogsubmit.style.display = '';
document.blog_feedback.openFCK.disabled = 'true';
document.blog_feedback.openFCK.style.display = 'none';
}
//-->
</script>
把其寫成一個(gè)簡(jiǎn)單的函數(shù),當(dāng)用戶顯示打開編輯器時(shí)才生成這個(gè)fckeditor,不用每次刷新頁面都去初始化一個(gè)編輯器,頁面的速度就會(huì)快多了。
====================================
用FCKeditor整合MT
證所周知MT是一個(gè)功能極其強(qiáng)大的BLOG程序,但是最為 人所詬病的地方就是它只有一個(gè)很簡(jiǎn)陋的編輯器,這讓用戶在排版的時(shí)候很不舒服。今天找了幾個(gè)WYSIWYG的開源編輯器,最后選定了強(qiáng)大的FCKeditor,關(guān)鍵是他對(duì)各種瀏覽器的支持都很好。
目前FCKeditor的最新版本是2.0 RC3,下載后解壓到你的STATIC_URI目錄,然后在mt\tmpl\cms建立一個(gè)新模板,文件名隨便起:
CODE:
<script type="text/javascript" src="<TMPL_VAR NAME=STATIC_URI>FCKeditor/fckeditor.js"></script>
<script type="text/javascript">window.onload = function()
{
var oFCKeditor = new FCKeditor( 'text' );
oFCKeditor.Width = 580;
oFCKeditor.Height = 400;
oFCKeditor.CheckBrowser = true;
oFCKeditor.ReplaceTextarea();
var pFCKeditor = new FCKeditor('text_more');
pFCKeditor.Width = 580;
pFCKeditor.Height = 400;
pFCKeditor.CheckBrowser = true;
pFCKeditor.ReplaceTextarea();
}
</script>
然后編輯你的edit_entry.tmpl,在<TMPL_INCLUDE NAME="header.tmpl">后面加上一句<TMPL_INCLUDE NAME="xxx.tmpl">,大功告成~!
==========================================
fckditor的網(wǎng)站地址:
http://www.fckeditor.net/
下載地址:
http://xxxz.net/DownSoft/?softid=6235&pathid=0
fckditor Html的演示:
http://www.fckeditor.net/demo/default.html
下載了過后看見里面有個(gè)叫 _samples 的文件夾 里面全是演示腳本,請(qǐng)選擇自己服務(wù)器支持的的腳本,這時(shí)我打開了ASP文件夾,里面又有
sample01.asp sample02.asp sample03.asp sample04.asp 還有一個(gè) sampleposteddata.asp 我用IIS調(diào)試了這幾個(gè)ASP文件得到的結(jié)果寫出來一下
方便討論
sample01.asp是最普通的就是跟上面演示的差不多
sample02.asp可以選擇 language 中文簡(jiǎn)體請(qǐng)選擇zh-cn 繁體就是 zh
sample03.asp可以選擇 default(默認(rèn)) 和 basic
sample04.asp可以選擇皮膚 里面的風(fēng)格有default,office2003,silver 只有silver的風(fēng)格最好看
sampleposteddata.asp是一個(gè)數(shù)據(jù)的驗(yàn)證,上面的文件都有這樣一句話
Quote:
<form action="sampleposteddata.asp" method="post" target="_blank">
隨便在一個(gè)sample0X.asp里面按submit就會(huì)得到在sampleposteddata.asp得到這樣的結(jié)果
(注意:我沒有修改,里面有一段默認(rèn)的話:This is some sample text. You are using FCKeditor.)
Quote:
FCKeditor - Samples - Posted Data
This page lists all data posted by the form.
--------------------------------------------------------------------------------
Field Name Value
FCKeditor1 This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.
這時(shí)我又進(jìn)一步看了看代碼發(fā)現(xiàn)了
調(diào)用這個(gè)HTML編輯器必須要包含一個(gè)叫 fckeditor.asp 的文件,還有調(diào)用代碼:
定義路徑: Dim sBasePath
sBasePath = "fckeditor/"
文件夾的取名叫 fckeditor 這里的 fckeditor/ 是相對(duì)路徑 意思就是說html編輯器的文件在fckeditor里面 不要忘了還有一個(gè) / 符號(hào)哦
定義一些相關(guān)東西: Dim oFCKeditor
Set oFCKeditor = New FCKeditor '這個(gè)由于語言能力問題,說不清楚...
oFCKeditor.BasePath = sBasePath 'oFCKeditor的路徑為sBasePath
oFCKeditor.Config("AutoDetectLanguage") = False '自動(dòng)選擇語言關(guān)了的,好象是的
oFCKeditor.Config("DefaultLanguage") = "zh-cn" '默認(rèn)語言為中文簡(jiǎn)體
oFCKeditor.Value = "" '默認(rèn)內(nèi)容為空
oFCKeditor.Create "Message" '這個(gè)就是上面提到的 Field Name
這里的Message跟<textarea name="message">一樣,oFCKeditor.Create "Message" 就是創(chuàng)建一個(gè)name 叫 Message
如果要得到這里面的內(nèi)容就可以這樣
DIM post_Message
post_Message=CheckStr(request.form("Message"))
設(shè)置<textarea>的高度,寬度在fckeditor.asp里面
Quote:
Private Sub Class_Initialize()
sBasePath = "/FCKeditor/"
sWidth = "100%"
sHeight = "200"
sToolbarSet = "Default"
sValue = ""
Set oConfig = CreateObject("Scripting.Dictionary")
End Sub
上面的內(nèi)容都知道了吧,sToolbarSet上面提到過可以是Default,如果你喜歡更簡(jiǎn)單的,可以該為basic..
打開 _testcases 是講一些使用方法 它直接調(diào)用fckeditor.js
最重要的文件都在 editor 文件夾里面
這里面lang語言包可以只留zh-cn.js 和 zh.js 同時(shí)還要修改 _translationstatus.txt 其他的可以刪除 有興趣自己去研究一下吧..
大概內(nèi)容好象就是這些了,其余的就看你們?cè)趺吹牧?L-blog如果用html編輯器可能還要用更加嚴(yán)密的過濾方式
如果非要用的話可以在 blog_content 里面增加一個(gè)log_edittype字段 判斷是 UBB編輯器 還是 HTML編輯器 和 PJblog 一樣
=================================
FCKDITOR2.0 for asp.net的范例及說明下載:
http://www.cnblogs.com/Files/Heroman/FCkEditorDemo.rar
本Blog純屬個(gè)人學(xué)習(xí)、工作需要,記錄相關(guān)資料。請(qǐng)不要發(fā)表任何有人身攻擊的言論,謝謝! www.zhipsoft.cn