又一個(gè)不錯(cuò)的FCKeditor 2.2的安裝、修改和調(diào)用方法
更新時(shí)間：2007年11月04日 12:57:37 作者：
忽然發(fā)現(xiàn)自己 Blog 的 FCKeditor 無法使用，好驚訝！居然看好的 PJBlog 也會(huì)有不行的時(shí)候。馬上到網(wǎng)上查找，把一些主要的東西 Copy 了下來。以下是主要內(nèi)容
FCKeditor的官方網(wǎng)站:www.fckeditor.com
和其他腳本類的程序一樣，F(xiàn)CKeditor 的安裝其實(shí)就是源代碼的拷貝。
我們按照官方的方法，在網(wǎng)站根目錄下建立 FCKeditor 這樣一個(gè)文件夾，
然后把下載下來的文件包釋放到該文件夾中。
只對(duì)一般的使用（ASP環(huán)境）進(jìn)行配置和源文件的精簡。
1、默認(rèn)語言
打開fckconfig.js文件（相對(duì)FCKeditor文件夾，以下同），把自動(dòng)檢測(cè)語言改為不檢測(cè)，把默認(rèn)語言改為簡體中文：
FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage = 'zh-cn' ;
2、字體列表
打開fckconfig.js文件，在字體列表中添加常用的“宋體;黑體;隸書;楷體_GB2312”：
FCKConfig.FontNames = '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
3、文件上傳
FCKeditor的文件管理程序在filemanager文件夾中，又分為瀏覽(browser)和上傳(upload)兩種。瀏覽是指瀏覽服務(wù)器文件并可以選擇，也可以上傳本地文件至服務(wù)器；上傳是指快速上傳(QuickUpload)，在窗口中點(diǎn)“上傳”選項(xiàng)卡打開就是，跟我們使用的 UBB 編輯器有點(diǎn)相似，選擇本地文件后上傳就行。也就是說 FCKeditor 中有一個(gè)文件瀏覽，有兩個(gè)文件上傳，而這些設(shè)置有些在一個(gè)文件中，有的則在多個(gè)文件中。比較復(fù)雜，改動(dòng)比較多，我們?cè)俜謳讉€(gè)小點(diǎn)兒來說。
1）打開和關(guān)閉文件瀏覽和上傳功能
有三個(gè)文件跟這個(gè)開關(guān)有關(guān)系，一個(gè)是 js 文件，兩個(gè)是asp文件，前者關(guān)閉后界面中不出現(xiàn)相關(guān)窗口或按鈕，后者關(guān)閉后相關(guān)功能不可用。首先是 fckconfig.js 文件，以下內(nèi)容設(shè)為 true 為開，false 則為關(guān)。
文件瀏覽和瀏覽中上傳功能：
FCKConfig.LinkBrowser = false ;
FCKConfig.ImageBrowser = false ;
FCKConfig.FlashBrowser = false ;
文件快速上傳功能：
FCKConfig.LinkUpload = true ;
FCKConfig.ImageUpload = true ;
FCKConfig.FlashUpload = true ;
其次設(shè)置兩個(gè) asp 文件：
editor\filemanager\browser\default\connectors\asp\config.asp
ConfigIsEnabled = False
表示文件瀏覽關(guān)閉
editor\filemanager\upload\asp\config.asp
ConfigIsEnabled = True
表示文件快速上傳打開
2）文件上傳或?yàn)g覽的路徑設(shè)置
注意 FCKeditor 是不支持虛擬目錄的，您的所有路徑都是針對(duì)網(wǎng)站根目錄的絕對(duì)路徑，這點(diǎn)對(duì)于在本地測(cè)試用虛擬目錄，發(fā)布到遠(yuǎn)程用網(wǎng)站目錄的開發(fā)者不太方便。我的就是這樣，WinXP 系統(tǒng)只能一個(gè)站點(diǎn)，只有用虛擬目錄表示不同的網(wǎng)站，在本地測(cè)試好了，上傳前還要臨時(shí)更改這個(gè)設(shè)置。
文件瀏覽路徑，打開文件：
editor\filemanager\browser\default\connectors\asp\config.asp
ConfigUserFilesPath = "/attachments/"
快速上傳的路徑，打開文件：editor\filemanager\upload\asp\config.asp
ConfigUserFilesPath = "/attachments/"
我的文件目錄在http://www.xxx.com/attachments/下面，就照以上設(shè)置。
如果在本地測(cè)試這個(gè)網(wǎng)站在虛擬目錄xxx中，則應(yīng)該設(shè)置為：
ConfigUserFilesPath = "/xxx/attachments/"
3）文件快速上傳的一個(gè)源文件BUG
以上設(shè)置好后，文件瀏覽和瀏覽中上傳可以順利進(jìn)行，但是你會(huì)發(fā)現(xiàn)“快速上傳”不能用?，F(xiàn)象就是當(dāng)選擇好本地文件后，點(diǎn)擊“上傳至服務(wù)器”的按鈕后沒有任何反應(yīng)。這就是因?yàn)閒ckconfig.js文件中的一個(gè)bug所致。
打開fckconfig.js文件，把FCKConfig.QuickUploadLanguage字樣的地方，替換成_QuickUploadLanguage，一共要替換三個(gè)地方。前者沒有定義就使用，所以有錯(cuò)，按代碼意圖應(yīng)該和后者的值一樣的。
4）上傳文件名自動(dòng)更名
FCKeditor不支持中文文件名稱，所以我們要讓文件存入服務(wù)器時(shí)更改名稱。由于有兩個(gè)上傳的地方，而且所用文件不同，所以兩個(gè)文件應(yīng)該同時(shí)改，我們先來看看快速上傳的文件，打開：editor\filemanager\upload\asp\upload.asp，在文件最后添加以下函數(shù)：
Public Function GetNewFileName()
dim ranNum
dim dtNow
dtNow=Now()
randomize
ranNum=int(90*rnd)+10
GetNewFileName=year(dtNow) & right("0" & month(dtNow),2) & right("0" & day(dtNow),2) & right("0" & hour(dtNow),2) & right("0" & minute(dtNow),2) & right("0" & second(dtNow),2) & ranNum
End Function
我們用年月日時(shí)分秒和兩位隨機(jī)數(shù)字來作為文件名，這樣既能夠分辨出文件上傳時(shí)間，也不容易重名。
然后仍然是這個(gè)文件，找到：
' Get the uploaded file name.
sFileName = oUploader.File( "NewFile" ).Name
把它改為：
' Get the uploaded file name.
sFileName = GetNewFileName() &"."& split(oUploader.File( "NewFile" ).Name,".")(1)
上面說的是快速上傳的文件，而文件瀏覽中上傳則是更改另外一個(gè)文件(editor\filemanager\browser\default\connectors\asp\commands.asp)，其修改方法和上面那個(gè)文件一樣：添加一個(gè)函數(shù)，修改一行代碼。
4、在ASP源程序中引用FCKeditor編輯器
首先在asp頁面頂端插入服務(wù)器端包含語句：
<!--#include file="FCKeditor/fckeditor.asp" -->
然后在表單里面添加以下代碼：
' 定義變量
Dim oFCKeditor
' 類的初始化
Set oFCKeditor = New FCKeditor
' 定義路徑（默認(rèn)路徑：/FCKeditor/）
oFCKeditor.BasePath="FCKeditor/"
' 定義工具條（默認(rèn)為：Default）
oFCKeditor.ToolbarSet="Basic"
' 定義寬度（默認(rèn)寬度：100%）
oFCKeditor.Width="100%"
' 定義高度（默認(rèn)高度：200）
oFCKeditor.Height=350
' 輸入框的初始值
oFCKeditor.Value="這是示例文本。"
' 創(chuàng)建輸入框名為：content
oFCKeditor.Create "content"
這樣就在表單里面創(chuàng)建了一個(gè)隱藏的名稱為content的輸入框，可以和其他表單元素一樣使用，例如用以下代碼取得該輸入框的值：
Dim content
content=CheckStr(Request.Form("content"))
以上用CheckStr對(duì)輸入數(shù)據(jù)進(jìn)行了檢測(cè)，原始數(shù)據(jù)如果包含單引號(hào)之類的，那么更新數(shù)據(jù)庫會(huì)出錯(cuò)。 =====================================
還有一些存疑的地方：
1、文件上傳路徑問題比較費(fèi)勁兒，看以后的版本又不有所改進(jìn)。
2、LinkBrowser和LinkUpload沒搞懂什么意思（UP2006-3-20:原來插入超級(jí)鏈接的時(shí)候，鏈接的目標(biāo)文件也是可以上傳的，而且這個(gè)文件格式默認(rèn)只規(guī)定了不允許上傳的格式。其實(shí)我們就可以利用這個(gè)功能上傳RAR或DOC等等格式的文件）
插入超鏈接時(shí)，在官方的默認(rèn)配置中只規(guī)定了禁止上傳的格式，而不是像圖片或Flash那樣規(guī)定了允許上傳的格式，這點(diǎn)要尤其注意，所以出現(xiàn)您所看到的可以上傳“任意”類型的文件。按照配置文件：
FCKConfig.LinkUploadDeniedExtensions = ".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$" ; // empty for no one
除了這些不允許，其它都是允許的。
關(guān)于去掉插入表單的選項(xiàng)，修改fckconfig.js的下面這一段就行了（注釋Form那一行）：
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak','UniversalKey'],
//['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['About']
] ;
FCKeditor的官方網(wǎng)站:www.fckeditor.com
和其他腳本類的程序一樣，F(xiàn)CKeditor 的安裝其實(shí)就是源代碼的拷貝。
我們按照官方的方法，在網(wǎng)站根目錄下建立 FCKeditor 這樣一個(gè)文件夾，
然后把下載下來的文件包釋放到該文件夾中。
只對(duì)一般的使用（ASP環(huán)境）進(jìn)行配置和源文件的精簡。
1、默認(rèn)語言
打開fckconfig.js文件（相對(duì)FCKeditor文件夾，以下同），把自動(dòng)檢測(cè)語言改為不檢測(cè)，把默認(rèn)語言改為簡體中文：
復(fù)制代碼 代碼如下:
FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage = 'zh-cn' ;
2、字體列表
打開fckconfig.js文件，在字體列表中添加常用的“宋體;黑體;隸書;楷體_GB2312”：
復(fù)制代碼 代碼如下:
FCKConfig.FontNames = '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
3、文件上傳
FCKeditor的文件管理程序在filemanager文件夾中，又分為瀏覽(browser)和上傳(upload)兩種。瀏覽是指瀏覽服務(wù)器文件并可以選擇，也可以上傳本地文件至服務(wù)器；上傳是指快速上傳(QuickUpload)，在窗口中點(diǎn)“上傳”選項(xiàng)卡打開就是，跟我們使用的 UBB 編輯器有點(diǎn)相似，選擇本地文件后上傳就行。也就是說 FCKeditor 中有一個(gè)文件瀏覽，有兩個(gè)文件上傳，而這些設(shè)置有些在一個(gè)文件中，有的則在多個(gè)文件中。比較復(fù)雜，改動(dòng)比較多，我們?cè)俜謳讉€(gè)小點(diǎn)兒來說。
1）打開和關(guān)閉文件瀏覽和上傳功能
有三個(gè)文件跟這個(gè)開關(guān)有關(guān)系，一個(gè)是 js 文件，兩個(gè)是asp文件，前者關(guān)閉后界面中不出現(xiàn)相關(guān)窗口或按鈕，后者關(guān)閉后相關(guān)功能不可用。首先是 fckconfig.js 文件，以下內(nèi)容設(shè)為 true 為開，false 則為關(guān)。
文件瀏覽和瀏覽中上傳功能：
復(fù)制代碼 代碼如下:
FCKConfig.LinkBrowser = false ;
FCKConfig.ImageBrowser = false ;
FCKConfig.FlashBrowser = false ;
文件快速上傳功能：
復(fù)制代碼 代碼如下:
FCKConfig.LinkUpload = true ;
FCKConfig.ImageUpload = true ;
FCKConfig.FlashUpload = true ;
其次設(shè)置兩個(gè) asp 文件：
editor\filemanager\browser\default\connectors\asp\config.asp
復(fù)制代碼 代碼如下:
ConfigIsEnabled = False
表示文件瀏覽關(guān)閉
editor\filemanager\upload\asp\config.asp
復(fù)制代碼 代碼如下:
ConfigIsEnabled = True
表示文件快速上傳打開
2）文件上傳或?yàn)g覽的路徑設(shè)置
注意 FCKeditor 是不支持虛擬目錄的，您的所有路徑都是針對(duì)網(wǎng)站根目錄的絕對(duì)路徑，這點(diǎn)對(duì)于在本地測(cè)試用虛擬目錄，發(fā)布到遠(yuǎn)程用網(wǎng)站目錄的開發(fā)者不太方便。我的就是這樣，WinXP 系統(tǒng)只能一個(gè)站點(diǎn)，只有用虛擬目錄表示不同的網(wǎng)站，在本地測(cè)試好了，上傳前還要臨時(shí)更改這個(gè)設(shè)置。
文件瀏覽路徑，打開文件：
editor\filemanager\browser\default\connectors\asp\config.asp
復(fù)制代碼 代碼如下:
ConfigUserFilesPath = "/attachments/"
快速上傳的路徑，打開文件：editor\filemanager\upload\asp\config.asp
復(fù)制代碼 代碼如下:
ConfigUserFilesPath = "/attachments/"
我的文件目錄在http://www.xxx.com/attachments/下面，就照以上設(shè)置。
如果在本地測(cè)試這個(gè)網(wǎng)站在虛擬目錄xxx中，則應(yīng)該設(shè)置為：
復(fù)制代碼 代碼如下:
ConfigUserFilesPath = "/xxx/attachments/"
3）文件快速上傳的一個(gè)源文件BUG
以上設(shè)置好后，文件瀏覽和瀏覽中上傳可以順利進(jìn)行，但是你會(huì)發(fā)現(xiàn)“快速上傳”不能用?，F(xiàn)象就是當(dāng)選擇好本地文件后，點(diǎn)擊“上傳至服務(wù)器”的按鈕后沒有任何反應(yīng)。這就是因?yàn)閒ckconfig.js文件中的一個(gè)bug所致。
打開fckconfig.js文件，把FCKConfig.QuickUploadLanguage字樣的地方，替換成_QuickUploadLanguage，一共要替換三個(gè)地方。前者沒有定義就使用，所以有錯(cuò)，按代碼意圖應(yīng)該和后者的值一樣的。
4）上傳文件名自動(dòng)更名
FCKeditor不支持中文文件名稱，所以我們要讓文件存入服務(wù)器時(shí)更改名稱。由于有兩個(gè)上傳的地方，而且所用文件不同，所以兩個(gè)文件應(yīng)該同時(shí)改，我們先來看看快速上傳的文件，打開：editor\filemanager\upload\asp\upload.asp，在文件最后添加以下函數(shù)：
復(fù)制代碼 代碼如下:
Public Function GetNewFileName()
dim ranNum
dim dtNow
dtNow=Now()
randomize
ranNum=int(90*rnd)+10
GetNewFileName=year(dtNow) & right("0" & month(dtNow),2) & right("0" & day(dtNow),2) & right("0" & hour(dtNow),2) & right("0" & minute(dtNow),2) & right("0" & second(dtNow),2) & ranNum
End Function
我們用年月日時(shí)分秒和兩位隨機(jī)數(shù)字來作為文件名，這樣既能夠分辨出文件上傳時(shí)間，也不容易重名。
然后仍然是這個(gè)文件，找到：
復(fù)制代碼 代碼如下:
' Get the uploaded file name.
sFileName = oUploader.File( "NewFile" ).Name
把它改為：
復(fù)制代碼 代碼如下:
' Get the uploaded file name.
sFileName = GetNewFileName() &"."& split(oUploader.File( "NewFile" ).Name,".")(1)
上面說的是快速上傳的文件，而文件瀏覽中上傳則是更改另外一個(gè)文件(editor\filemanager\browser\default\connectors\asp\commands.asp)，其修改方法和上面那個(gè)文件一樣：添加一個(gè)函數(shù)，修改一行代碼。
4、在ASP源程序中引用FCKeditor編輯器
首先在asp頁面頂端插入服務(wù)器端包含語句：
復(fù)制代碼 代碼如下:
<!--#include file="FCKeditor/fckeditor.asp" -->
然后在表單里面添加以下代碼：
復(fù)制代碼 代碼如下:
' 定義變量
Dim oFCKeditor
' 類的初始化
Set oFCKeditor = New FCKeditor
' 定義路徑（默認(rèn)路徑：/FCKeditor/）
oFCKeditor.BasePath="FCKeditor/"
' 定義工具條（默認(rèn)為：Default）
oFCKeditor.ToolbarSet="Basic"
' 定義寬度（默認(rèn)寬度：100%）
oFCKeditor.Width="100%"
' 定義高度（默認(rèn)高度：200）
oFCKeditor.Height=350
' 輸入框的初始值
oFCKeditor.Value="這是示例文本。"
' 創(chuàng)建輸入框名為：content
oFCKeditor.Create "content"
這樣就在表單里面創(chuàng)建了一個(gè)隱藏的名稱為content的輸入框，可以和其他表單元素一樣使用，例如用以下代碼取得該輸入框的值：
復(fù)制代碼 代碼如下:
Dim content
content=CheckStr(Request.Form("content"))
以上用CheckStr對(duì)輸入數(shù)據(jù)進(jìn)行了檢測(cè)，原始數(shù)據(jù)如果包含單引號(hào)之類的，那么更新數(shù)據(jù)庫會(huì)出錯(cuò)。 =====================================
還有一些存疑的地方：
1、文件上傳路徑問題比較費(fèi)勁兒，看以后的版本又不有所改進(jìn)。
2、LinkBrowser和LinkUpload沒搞懂什么意思（UP2006-3-20:原來插入超級(jí)鏈接的時(shí)候，鏈接的目標(biāo)文件也是可以上傳的，而且這個(gè)文件格式默認(rèn)只規(guī)定了不允許上傳的格式。其實(shí)我們就可以利用這個(gè)功能上傳RAR或DOC等等格式的文件）
插入超鏈接時(shí)，在官方的默認(rèn)配置中只規(guī)定了禁止上傳的格式，而不是像圖片或Flash那樣規(guī)定了允許上傳的格式，這點(diǎn)要尤其注意，所以出現(xiàn)您所看到的可以上傳“任意”類型的文件。按照配置文件：
復(fù)制代碼 代碼如下:
FCKConfig.LinkUploadDeniedExtensions = ".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$" ; // empty for no one
除了這些不允許，其它都是允許的。
關(guān)于去掉插入表單的選項(xiàng)，修改fckconfig.js的下面這一段就行了（注釋Form那一行）：
復(fù)制代碼 代碼如下:
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak','UniversalKey'],
//['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['About']
] ;
相關(guān)文章
在使用 UEditor 編輯器 時(shí)遇到了跨域的問題，導(dǎo)致無法發(fā)圖片，原因是由于 iframe 中的 src 跨域造成的2013-06-06
ckeditor和ueditor那個(gè)好 CKEditor和UEditor使用比較
本來項(xiàng)目中使用CKEditor已經(jīng)做好了的富文本編輯器的功能，但是業(yè)務(wù)考慮到美觀性要求換成UEditor，所以就在這里總結(jié)下,需要的朋友可以參考下2017-03-03
19款javascript富文本編輯器。也許你還有興趣查看15個(gè)基于Web的HTML編輯器和6款所見即所得(WYSIWYG)的在線Web編輯器。2010-11-11
xhEditor 免費(fèi)的國產(chǎn)HTML在線編輯器
在線編輯器，CKeditor+CKfinder的組合是首選的，可惜CKfinder要收費(fèi)，黃金搭檔只有1個(gè)是免費(fèi)的，又不想用回老版本，所以站長只好另尋他路。2011-06-06
整理資料的時(shí)候，發(fā)現(xiàn)電腦里保存了一些ASX文件。這些文件原來是玩MSN空間時(shí)用到的，主要用于在MSN空間上安裝播放器。很久沒玩MSN空間了，雖然現(xiàn)在也還在用MSN，但MSN空間的速度真的是慢得讓我難以接受，所以還是不用MSN空間。順便分析一下ASX文件的格式，以方便那些還在用MSN空間的朋友。2008-02-02
今天在使用chrome打開后臺(tái)的時(shí)候，發(fā)現(xiàn)FCKeditor編輯器菜單等都不顯示，chrome確實(shí)不適合后臺(tái)使用，以后還是繼續(xù)ie核心的吧2014-01-01
又一個(gè)不錯(cuò)的FCKeditor 2.2的安裝、修改和調(diào)用方法
又一個(gè)不錯(cuò)的FCKeditor 2.2的安裝、修改和調(diào)用方法...2007-11-11
百度ueditor組件上傳圖片后如何設(shè)置img里的alt屬性
百度ueditor組件，使用上傳圖片后，設(shè)置了一個(gè)alt屬性，其值是上傳圖片時(shí)的本地路徑，如果想更改的話可以參考下面的解決方法2014-09-09
SyntaxHighlighter 去掉右側(cè)滾動(dòng)條的方法
SyntaxHighlighter這個(gè)是一個(gè)高亮插件?，F(xiàn)在被用于很多網(wǎng)站的代碼顯示。但是SyntaxHighlighter3.0.83，由于自適應(yīng)寬和高，導(dǎo)致一直有滾動(dòng)條的問題2020-03-03
ckeditor是一款功能強(qiáng)大的富文本編輯工具，這篇文章主要為大家詳細(xì)介紹了ckeditor自定義插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12