1. 程式人生 > >ASP.NET專案中使用CKEditor +CKFinder 實現上傳圖片

ASP.NET專案中使用CKEditor +CKFinder 實現上傳圖片

CKEditor是什麼

CKEidtor是一個線上富文字編輯器,可以將讓使用者所見即所得的獲得編輯線上文字,編輯器或自動將使用者編輯的文字格式轉換成html程式碼。

在ASP.NET工程中新增CKEditor外掛

首先我們先看一下效果:

1.下載外掛:可以到CKEditor官方網站下載 CKEditor for ASP.NET Control.網址:http://ckeditor.com/download  解壓後得到如下圖

2.在自己的專案先新建Lbrary資料夾跟js資料夾(js小寫)並在js資料夾下在簡歷ckeditor和ckfinder資料夾,壓縮包找到其中/bin/Debug下的CKEditor.NET.dll考到你新建的資料夾下,如後在引用中右鍵新增對剛才的CKEditor.NET.dll的引用

3.將壓縮包中的_Sample的ckeditor資料夾下的9個檔案考到js資料夾下的ckeditor裡連同(部分檔案如下)

5.在aspx網頁中註冊CKEditor外掛:

第一種一種方式是在單個網頁的頂部新增下面的語句如果要在單個網頁中使用該外掛則在該網頁到最上面新增

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

第二種方式是在整個工程的Web.config檔案的

<system.web><pages><
controls>中新增<add tagPrefix="CKEditor" assembly="CKEditor.NET" namespace="CKEditor.NET"/>

6.然後在網頁中需要使用到外掛的地方新增

<CKEditor:CKEditorControl ID="id" BasePath="~/ckeditor" runat="server"></CKEditor:CKEditorControl>

7.下面來實現圖片的上傳,同樣在官網上下載CKFinder,解壓後把bin/Debug下的CKFinder.dll也考到Lbrary資料夾中並新增對其的引用

8.把ckfinder檔案下的4個問價考到ckfinder資料夾裡

9.修改ckeditor下的config.js檔案,在其新增如下程式碼

var ckfinderPath = "/js";    config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html';    config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Images';    config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Flashs';    config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Files';    config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Images';    config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Flash';

10修改ckfinder下的config.ascx 檔案,把return false 給為return true

大功告成,趕緊執行一下吧!