CKEditor和CKFinder 解決圖片上傳

來源:互聯網
上載者:User

CKEditor和CKFinder的最新版可以到官方網站(http://cksource.com)上下載獲得。 

把以上兩個資源放到網站的根目錄: /CKEditor 和 /CKFinder (不區分大小寫)

在頁面使用 CKEditor:

        <textarea cols="80" id="prcontent" name="content" rows="50">hello world!</textarea>

        <script type="text/javascript">

            CKEDITOR.replace('content', { height: 200, width: 520 });

        </script>

CKEditor 本身不內建上傳功能,所以需要配合CKFinder才可以實現上傳

第一步:網站需要引用CKFinder的dll(目錄:/CKFinder/bin/Release/CKFinder.dll)

第二步:配置CKEditor的config.js (目錄:/CKEditor/config.js ) 在CKEDITOR.editorConfig函數裡加上,不需要的功能可以去掉

    config.filebrowserBrowseUrl= '/ckfinder/ckfinder.html'; //上傳檔案時瀏覽服務檔案夾

    config.filebrowserImageBrowseUrl= '/ckfinder/ckfinder.html?Type=Images'; //上傳圖片時瀏覽服務檔案夾

    config.filebrowserFlashBrowseUrl= '/ckfinder/ckfinder.html?Type=Flash';  //上傳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'; //上傳Flash按鈕(標籤)

配置完成後CKEditor 就帶有上傳功能了,但假如上傳圖片時,圖片的檔案是用原來圖片的名字,想改為隨機檔案名稱呢,怎麼辦。接著看第三步。

 

第三步:修改CKFinder的源碼。CKFinder內建有源碼,目錄:/CKFinde/_source

在VS裡建立一個 現在的項目 指向CKFinde/_source/CKFinder.Net.sln

1) 開啟/Settings/ConfigFile.cs檔案

定位27行,添加一個屬性:public bool RandomReName; //隨機重新命名

定位67行,給剛才的屬性賦值:RandomReName = true; //預設值為true

儲存關閉檔案

2) 開啟/Connector/Config.cs檔案

定位62行,添加一個屬性:

        public bool RandomReName

        {

            get { return Settings.ConfigFile.Current.RandomReName; }

        }

儲存關閉檔案

3) 開啟/Connector/CommandHandlers/FileUploadCommandHandler.cs檔案

定位64行,添加一句判斷代碼:

                        if ( Config.Current.RandomReName)  //使用隨機名

                            sFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + sExtension;


儲存關閉檔案
4) 重建項目,把/ckfinder/_source/bin/Debug/CKFinder.dll覆蓋/ckfinder/bin/Release/CKFinder.dll或者網站項目去掉之前加入的引用再重新從CKFinder.Net項目裡的Dll
最後一步:開啟/ckfinder/config.ascx
定位42行,添加一屬性:(其實這個加不加都可以的,因為之前有設定預設值,但使用原名時一定要設定為false)

        //上傳完畢後使用隨機檔案名稱

        RandomReName = true;


儲存關閉

好了,到此已經配置成功了,CKEditor 可以有上傳功能了。其它的功能的設定,有空再繼續研究~

還要提醒一句:CKEditor 和 CKFinder 檔案夾裡有很多不需要的東西,例如名字帶有底線前輟的,.net項目不需要php,asp的。

如果上傳檔案出現錯誤:因為安全原因,檔案不可瀏覽. 請聯絡系統管理員並檢查CKFinder設定檔.

需要修改config.ascx檔案中

public override bool CheckAuthentication()
{
reture false;
}
修改為:

public override bool CheckAuthentication()
{

// 表單驗證時用
 return Request.IsAuthenticated;

//reture true; 不推薦使用
}


相關關鍵詞:

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.