CKEditor和CKFind 使用配置 常見配置問題的解決辦法 CKEditor Demo（Asp.net）

      最近的一個項目有新聞模組，需要一個支援圖文混排的富文字編輯器，支援asp.net，並要求圖片能從本地上傳。

      到網上找了下，有不少做得簡潔的js富文字編輯器，但是，插入圖片時，需要提供網狀圖片的路徑，這就要求將要使用的圖片先上傳至一個支援外聯的相簿，這顯然是客戶所不能接受的，後來，從網友的blog中，找到了CKEditor(點我瀏覽官網demo)，研究下，發現它配置好CKFind後，能滿足我這些需求，經過一些配置與調試，將環境搭了起來，我把其中摸索的彎路去掉了，整理出一個簡單的配置流程和Demo。

      【第一步：下載CKEditor和CKFinder】

      資源當然是在官網下載最讓人放心，官網地址是：CKEditor（點擊開啟）

      首先要明白一點：

      CKEditor跟其他富文字編輯器一樣，插入圖片和flash也要求提供網路路徑，上傳本地圖片是CKFind的功能，所以，你必須把兩者都配置好，否則，跟你找的其他富文字編輯器沒有太多區別。

      到哪裡下載CKEditor和CKFind呢。

      點擊進入官網：http://ckeditor.com/

      點擊Download連結，找到最新版的CKEditor，注意下載CKEditor for Asp.net的版本：

      下載下來是個zip的包。

      接著下載CKFind的包：CKFinder官網，注意下載asp.net的版本。

      下載好後，會得到ckeditor_aspnet_3.6.1和ckfind的壓縮包。

      【第二步：配置CKEditor】

      解壓第一步中下載的ckeditor的壓縮包，會得到以下的結構目錄：

     

      開啟_Samples檔案夾，裡麵包含配置需要的所有檔案，按照以下的步驟完成CKEditor的配置：

      1. 添加引用：開啟_Samples\bin目錄，找到CKEditor.NET.dll，拷貝到你的項目中（最好在網站根目錄建立一個專門存放第三方動態連結程式庫檔案的檔案夾），然後添加引用。

      2. 拷貝ckeditor：_Samples包含一個叫ckeditor的檔案夾，它是富文字編輯器的一些樣式、js和介面的包，需要拷貝到你的項目中，在引入項目之前，可以做適當的精簡：

      如果不需要支援除中英文外的其他語言，可以將lang檔案夾下除了en和zh開始的js檔案全部刪除。皮膚有三種，根據喜好，可以刪除另外兩種，就在skins檔案夾下（當然你肯定需要在配置好後，分別查看三種不同皮膚的效果，再做決定）。根目錄下的 changes.html、install.html、license.html可以刪掉。

      3. 配置富文字編輯器的功能：在ckeditor檔案夾下找到config.js，按照以下做一些配置：

     

/*Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.For licensing, see LICENSE.html or http://ckeditor.com/license*/CKEDITOR.editorConfig = function (config) {    config.skin = 'kama'//kama,v2,office2003,皮膚設定    config.language = 'zh-cn'; //設定中文環境    config.font_names = '宋體;楷體_GB2312;新宋體;黑體;隸書;幼圓;微軟雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; //編輯字型設定    config.toolbar =    [        ['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],        ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'],        ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar', 'Styles',        'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-', 'About']    ];     //設定引用路徑    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';    };

      toolbar有兩種內建的設定：

      config.toolbar = "Basic";   
      config.toolbar = "Full"; 
      顧名思義，一種是包含最基本的按鈕，一種是包含所有的功能按鈕。

      另外你還可以自訂配置，不需要的按鈕，可以用'-'來替代（註：[]內的元素不是固定的，你可以把某個[]內的按鍵標識放到其他的[]中，如此修改，會在編輯器功能按鈕的位置分布上體現出差別）。

      設定引用路徑是配置ckfinder的配置，一定要根據ckeditor和ckfinder放置的位置來設定。

      【第三步：配置CKFinder】

      下載到zip的包後，解壓得到以下檔案：

     

      ckfinder\bin\Release\目錄下找到CKFinder.dll，拷貝到你的網站中，並添加引用。

      將整個ckfinder檔案夾拷貝到你的網站中，注意第二步驟中，有針對ckfinder位置的配置，這裡放置ckfinder時，留意與那個配置保持一致。

      至此，ckeditor和ckfinder的配置基本ok了，接下來是如何在頁面中使用ckeditor了。

      【第四步：如何使用CKEditor】

      首先，在你要使用富文字編輯器的頁面，添加類型註冊：  

     <%@Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor"%>

      接著，引入兩個js檔案：

    <script type="text/javascript" language="javascript" src="../ckfinder/ckfinder.js"></script>    <script type="text/javascript" language="javascript" src="../ckeditor/ckeditor.js"></script>

      注意路徑。

      然後，添加控制項：

    <CKEditor:CKEditorControl ID="CKEditor1" Width="95%" UIColor="#999999" Height="200px" runat="server"></CKEditor:CKEditorControl> 

      這樣，在後台就可以直接操作CKEditor1對象了，Text屬性裡面即是你想要的資料。

      【配置時，所遇到的問題】
      遇到過幾個問題，沒有截圖，這裡也沒辦法描述多詳細，但是，我可以列出幾個容易出現錯誤的地方：

      1. 添加了ckeditor的引用，但是沒有拷貝ckeditor的檔案夾，導致，頁面添加控制項進來，顯示的卻是一個textarea。

      2. 沒有添加ckfinder的引用，會導致上傳檔案出錯，而且ckfinder會把錯誤資訊以網頁的形式顯示在上傳檔案的文字框內，很難發現錯誤資訊。

      3. ckeditor的config.js中，ckfinder的路徑配置錯誤，會導致看不到上傳的標籤頁，而無法上傳本地圖片。

      總結：總的來說，配置不複雜，東西好用，易上手，最後附幾篇其他寫得比較清晰的ckeditor相關配置的blog：

      Asp.net 中配置 CKEditor和CKFinder 

      ckeditor與ckfinder的中國本地化改造