軟體積木工坊

知識.分享.成長.進化

2008-09-26

ASP.NET使用FCKeditor 2.63控制項(安裝篇)

摘要:ASP.NET安裝FCKeditor 2.63控制項(安裝篇)

FCKeditor(目前版本2.63)

 

是一個在web上的文字編輯器,支援各種文字格式的編輯功能

同時支援ASP.NET的控制項功能,使用起來相當方便

使用者只要到http://www.fckeditor.net/的download區即可下載

下載檔案

使用FCKeditor作為ASP.NET控制項必須下載2個檔案:

1.FCKeditor 2.6.3.zip(程式檔):在網站上執行FCKeditor所需的檔案(FCKeditor所用到的圖片,程式碼)

因此,必須下載並解壓縮到欲執行網站的目錄下

2.FCKeditor.NET 2.6.3.zip(控制項參考檔):ASP.NET加入參考的DLL檔及FCKeditor的原始碼

 

加入參考

將1.所下載的檔案解壓縮到您網站的目錄中(如下圖的紅線)

將2.所下載的檔案解壓縮,並將\bin\Release\2.0\FredCK.FCKeditorV2.dll

複製到您網站的bin目錄下(如下圖藍線)

接著,將剛才複製到bin\FredCK.FCKeditorV2.dll 加入參考,如下圖所示:

到.NET環境下的[工具]>[選擇工具箱項目...]>瀏覽>選擇

bin\FredCK.FCKeditorV2.dll檔,加入工具箱項目,如下圖所示:

 接著檢視工具箱,果然多了FCKeditor控制項

設定web.config

再來,要設定web.config,提供FCKeditor的相關路徑:

1.程式檔路徑:提供FCKeditor執行時,所需資源,圖片,程式檔的路徑

2.上傳檔案路徑:提供FCKeditor上傳檔案時,所存放上傳檔案的路徑

筆者的設定如下:

<configuration>
  <appSettings>
  <add key="FCKeditor:BasePath" value="~/FCKeditor/"/>
  <add key="FCKeditor:UserFilesPath" value="~/FCKeditor/uploadfile/"/>
 </appSettings>

"FCKeditor:BasePath" value="~/FCKeditor/" 是設定fckeditor程式檔所在的目錄

"FCKeditor:UserFilesPath" value="~/FCKeditor/uploadfile/"是設定fckeditor上檔檔案的目錄

因此,筆者事先在~/FCKeditor下開了一個uploadfile的資料夾,如下圖所示:

這2個設定可視您網站需求自行修改

設定fckconfig.js

本階段主要是設定控制上傳檔案及圖片所用程式語言

內建有:asp,aspx,php...等

(預設為PHP),因此要改成aspx

設定\fckeditor\fckconfig.js,設定方法並不複雜,筆者建議直接用記事本編輯即可

打開fckconfig.js,利用搜尋找到

var _FileBrowserLanguage = 'php' ;

var _QuickUploadLanguage = 'php' ;

把'php'改成'aspx',如下圖所示:

安全權限設定

最後一個階段是安全性的設定,為了增加檔案上傳的安全性

FCKeditor在檔案上傳做了簡單的安全設定,避免有心人士任意上傳檔案影響伺服器的安全

根據上一個步驟所設定的語言是aspx,因此要到對應的資料夾下去設定該檔案,aspx的安全設定檔在

\fckeditor\editor\filemanager\connectors\aspx\config.ascx

安全設定上可分為3種設定方式:1.簡易設定,2.安全設定,3拒絕上傳

1.簡易上傳:任何登入網站的使用者都可以使用FCKeditor的上傳功能

01     private bool CheckAuthentication()
02     {
03   // WARNING : DO NOT simply return "true". By doing so, you are allowing
04   // "anyone" to upload and list the files in your server. You must implement
05   // some kind of session validation here. Even something very simple as...
06   //
07          // return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
08   //
09   // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
10   // user logs in your system.
11
12                 //return false;
13                 return true;
14     }

2.安全設定:經過網站身份認證,才可上傳檔案(Session[ "IsAuthorized"]=true)

01     private bool CheckAuthentication()
02     {
03   // WARNING : DO NOT simply return "true". By doing so, you are allowing
04   // "anyone" to upload and list the files in your server. You must implement
05   // some kind of session validation here. Even something very simple as...
06   //
07           return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
08   //
09   // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
10   // user logs in your system.
11
12                 //return false;
13                 //return true;
14     }

3.拒絕上傳:任何人都無法上傳檔案

01     private bool CheckAuthentication()
02     {
03   // WARNING : DO NOT simply return "true". By doing so, you are allowing
04   // "anyone" to upload and list the files in your server. You must implement
05   // some kind of session validation here. Even something very simple as...
06   //
07          // return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
08   //
09   // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
10   // user logs in your system.
11
12                 return false;
13                 //return true;
14     } 

根據上述的設定,即可開始使用FCKeditor控制項了,詳細的FCKeditor應用,待應用篇再做更進一步的說明.