ckeditor和ckfinder配合開發asp.net內容發佈頁面

1、ckeditor配置：

ckeditor是fckeditor的替換版本，功能比fckeditor更強大。

下載：由於針對asp.net開發，所以可以去官網http://ckeditor.com/download下載，注意可以直接找到“CKEditor for ASP.NET”下載。下載後解壓。

添加源檔案到項目：解壓後，將ckeditor_aspnet_3.6.2\_Samples檔案夾下的ckeditor檔案夾複製到你的visual studio的方案總管中項目的根目錄下。

添加引用：在項目中添加引用，將ckeditor_aspnet_3.6.2\_Samples\bin檔案夾下的CKEditor.NET.dll加入到項目中。

配置：在web.config中：

<pages>
   <controls>
    <add namespace ="CKEditor.NET" assembly="CKEditor.NET" tagPrefix="CKEditor"/>
   </controls>
  </pages>

 

2、ckfinder配置：

下載：可以去http://ckfinder.com/download下載，注意選擇asp.net，下載後解壓。

添加源檔案到項目：解壓後，將ckfinder_aspnet_2.2.2\ckfinder檔案夾複製到你的項目根目錄下。然後刪除ckfinder_aspnet_2.2.2\ckfinder檔案夾下的_samples、_source、bin檔案夾（這些檔案夾是產生ckfinder.dll程式集和測試用的）。

添加引用：將解壓檔案夾下ckfinder_aspnet_2.2.2\ckfinder\bin\debug下的ckfinder.dll添加到網站引用。（注意：也可以不添加此引用。如果需要將ckeditor綁定到ckfinder就需要）。

 

3、構建頁面：

將ckeditor控制項加入到測試頁面中：

<form id="form1" runat="server">
    <div>
    <CKEditor:CKEditorControl runat ="server" ID="editor1"
            FilebrowserBrowseUrl="/ckfinder/ckfinder.html"
            FilebrowserFlashBrowseUrl="/ckfinder/ckfinder.html?Type=Flash"
            FilebrowserFlashUploadUrl="/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&amp;type=Flash"

            FilebrowserImageBrowseUrl="/ckfinder/ckfinder.html?Type=Images"
            FilebrowserImageUploadUrl="/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&amp;type=Images"

            FilebrowserUploadUrl="/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&amp;type=Files"></CKEditor:CKEditorControl>
    </div>
    </form>

一定要注意：上述url相關屬性配置，這些配置是串連ckeditor和ckfinder的關鍵（asp.net版本）。其他版本可參考：http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)

很多其他文章介紹說，在ckeditor的config.js中配置也是可以的。那就不需要上述url屬性了。改成：

var instance = CKEDITOR.instances['editor1'];

if (instance) { CKEDITOR.remove(instance); }

CKEDITOR.replace('editor1',
    {
        filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
        filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?Type=Images',
        filebrowserFlashBrowseUrl: '/ckfinder/ckfinder.html?Type=Flash',
        filebrowserUploadUrl: '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
        filebrowserImageUploadUrl: '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
        filebrowserFlashUploadUrl: '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
    });

再次注意：由於是使用ckeditor控制項，所以上述代碼中的前兩行很重要，否則會提示id重複。

如果是在主版頁面中使用ckeditor控制項，要注意使用ClientID屬性。

 

4、配置ckfinder，允許用戶端上傳：

（1）首先找到ckfinder檔案夾下的config.ascx，開啟。

修改CheckAuthentication（）方法，將return false改成return true.（如果你沒有修改的話，應該是第20行代碼）

（2）如果要修改預設的用於儲存上傳檔案的路徑，可以修改SetConfig（）方法中的BaseUrl（預設是第34行代碼），指定一個自訂檔案夾，要注意此檔案夾要有寫入許可權。

 

這樣可以上傳了。