CKEditor上傳圖片—配置CKFinder(from www.sysoft.cc www.sysoft.net.cn)

標籤：style   blog   http   io   ar   color   使用   sp   java   

CKEditor上傳圖片—配置CKFinder
在網站開發中，如果有發布類似新聞的圖文混排需求時，CKEditor不失為一個很好的選擇，如下：

http://ckeditor.com/download

它的前身是FCKEditor，隨著它的更新，上傳圖片的功能被分離出去了，現在如果需要實現上傳圖片，要麼自己寫代碼，還有一種方法是使用CKFinder，如下：

http://ckfinder.com/download

下面詳細描述一下使用它們的時候如何配置。

CKEditor我下載的是3.6.4，CKFinder下載的是2.3 for ASP.NET，首先解壓所有的檔案，然後將ckeditor和ckfinder檔案夾放到網站的目錄下，可以刪除ckeditor和ckfinder檔案夾下的_samples、_source 檔案夾，將CKFinder.dll添加到網站的bin/檔案夾中，然後在網站頁面頭部添加js的引用，具體路徑根據自己放置的路徑設定，如下：

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

在頁面中添加一個textarea,具體代碼如下：

<textarea name="individual" id="individual" runat="server"></textarea><script type="text/javascript">    CKEDITOR.replace(‘individual‘);</script>

接下來開啟ckeditor檔案夾下的config.js檔案，在CKEDITOR.editorConfig = function (config) {};方法中添加如下代碼：

config.filebrowserImageBrowseUrl = ‘../editor/ckfinder/ckfinder.html?Type=Images‘;config.filebrowserFlashBrowseUrl = ‘../editor/ckfinder/ckfinder.html?Type=Flash‘;config.filebrowserUploadUrl = ‘../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files‘;config.filebrowserImageUploadUrl = ‘../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images‘;config.filebrowserFlashUploadUrl = ‘../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash‘;config.filebrowserWindowWidth = ‘800‘;  //“瀏覽伺服器”彈出框的size設定config.filebrowserWindowHeight = ‘500‘;

上面的路徑也需要根據自己的設定。

然後開啟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;    }

 

CKEditor上傳圖片—配置CKFinder(from www.sysoft.cc www.sysoft.net.cn)