CKEditor&CKFinder結合實現在線HTML編輯器

最近在做一個項目時需要用到在線HTML編輯器，之前做的是用的FreeTextBox，但總感覺不太完善。於是想起了FCKeditor，知道它很強大，但還沒用過，於是準備使用FCKeditor。

FCKeditor目前已經改名爲了CKEditor和CKFinder，CKEditor不包含上傳文件功能，該功能被分割在了CKFinder中，因此需要同時使用這兩個文件才能實現文件上傳，同時因爲我是基於ASP.NET開發的，需要同時下載CKEditor for ASP.NET。

下面詳細介紹如下使用CKEditor&CKFinder實現在線HTML編輯器：

到官方下載相關文件（注意選擇asp.net版本）：http://ckeditor.com/download ckeditor_3.6.2.zip ，ckeditor_aspnet_3.6.2.zip http://ckfinder.com/download ckfinder_aspnet_2.1.zip

我是在VS2010+SQL2008Express Win7 旗艦版的環境下開發的。

新建ASP.NET空網站，分別把下載的文件解壓下，複製解壓後的ckeditor_3.6.2裏面的ckeditor整個文件夾粘貼到網站的根目錄下，然後刪除不用的文件，有童鞋稱這個過程爲“瘦身”，呵呵

結果如下：

同樣把解壓後的ckfinder_aspnet_2.1的文件夾裏的ckfinder文件夾整個複製粘貼到網站的根目錄下，與ckeditor同級。也對其瘦身，結果如下：

添加到CKEditor.NET.dll和CKFinder.dll文件的引用，分別位於下載的文件的bin目錄下。

接下來開始配置

先修改ckeditor，在ckeditor文件夾下打開config.js，添加如下代碼，分別設置皮膚，語言，工具條

CKEDITOR.editorConfig = function (config) {

    // Define changes to default configuration here. For example:

    // config.language = 'fr';

    // config.uiColor = '#AADC6E';

    config.skin = 'v2';

    config.language = 'zh-cn';

 

    config.toolbar = 'Full';

 

    config.toolbar_Full =

    [

             { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },

             { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },

             { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },

             { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },

             '/',

             { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },

             { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },

             { name: 'links', items : [ 'Link','Unlink','Anchor' ] },

             { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },

             '/',

             { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },

             { name: 'colors', items : [ 'TextColor','BGColor' ] },

             { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }

    ];

 

    config.toolbar_Basic =

    [

             ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']

    ];

};

現在就可以在aspx頁面添加ckeditor編輯器了，新建Default.aspx，在head部分添加js引用。<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

這個是必須的。

然後在div部分添加<asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine" runat="server"></asp:TextBox>，

保存運行就可以看到編輯器了，

 

獲取編輯器的值插入數據庫 則TextBox.Text即可，綁定的話直就從數據庫讀取<asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox> ，提示：在插入類似'時候ASPX頁面提示客戶端（*）中檢測到有潛在危險的 Request.Form 值。在頁面HTML代碼第一行加入validateRequest="false"或者修改web.config文件即可，但這不是最安全的做法，可能存在提交非法數據和跨站的危險。關鍵是這時點擊插入圖片時，出現的是

沒有上傳圖片選項卡，雖然這樣也可以用，需要通過其他方法上傳圖片到服務器，然後粘貼進圖片的URL地址。但顯然我們希望能夠直接在此進行圖片的上傳和編輯。接下來就用到ckfinder了。

繼續修改ckeditor下面的config.js，在函數的底部繼續加入如下代碼：

config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';

    config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';

    config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';

    config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';

    config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';

    config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

config.filebrowser* 爲上傳文件時調用的ckfinder connector.aspx文件相應路徑，根據您的網站文件結構修改，僅爲測試我沒有修改文件夾名稱。添加代碼後在運行一下看看這個時候你發現有了上傳的按鈕

但這時當上傳圖片時，出現“因爲安全原因，文件不可瀏覽。請聯繫系統管理員並檢查CKFinder配置文件。

這時打開ckfinder下面的config.ascx文件，修改public override bool CheckAuthentication()

返回值爲true,這裏需要添加過濾條件，因爲是測試就不寫了

public override bool CheckAuthentication()

         {

                   // WARNING : DO NOT simply return "true". By doing so, you are allowing

                   // "anyone" to upload and list the files in your server. You must implement

                   // some kind of session validation here. Even something very simple as...

                   //

                   //                 return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );

                   //

                   // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the

                   // user logs on your system.

 

                   return true;

         }

還是在這個文件內找到public override void SetConfig()

方法裏面的BaseUrl = "/ckfinder/userfiles/";後面的目錄根據自己的項目結構填寫，我這裏用的是默認的文件夾。

至此基本結束了。下一篇文章會介紹如何給上傳的圖片重命名。至於詳細情況可查看官方文檔。

本文參考：http://www.cnblogs.com/root7/archive/2010/11/02/1866712.html