[ASP.NET] HTML編輯器 - ckEditor

HTML 編輯器是個可以讓使用者在修改內容時，提供了簡易如 Word 的編輯功能，例如文字顏色、字型、字型大小等等，如下圖所示：

在此記錄較常被使用的 HTML編輯器 - ckEditor，如何運用在 ASP.NET 上面。

(1) 下載 ckEditor standard version 以及 ckEditor for ASP.NET。

(2) 將 ckEditor standard version 解壓縮後，將 ckEditor 資料夾放在專案根目錄，再將 ckEditor for ASP.NET 解壓縮，加入參考資料夾裡的 ckEditor_aspnet_3.6.6.2\bin\Release\CKEditor.NET.dll 。

(3) 在 aspx 網頁加上Register Assembly：<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEDitor" %>

(4) 在 aspx 網頁加上 ckEditor 元件：<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>


以上步驟做完，基本功能就可以使用了，如果要使用"上傳圖片"的功能，這功能預設是關閉的，必須另外安裝 ckFinder 才能使用，而 ckFinder 並非免費，但可以試用，所以也順便記錄一下如何開啟此功能。

(1) 下載 ckFinder trial version。

(2) 解壓縮後，加入參考 ckfinder\bin\Release\CKFinder.dll。

(3) ckFinder 資料夾一樣放專案根目錄，並修改 ckFinder\config.ascx，將CheckAuthentication method 裡 return true、SetConfig method 裡的 baseURL="上傳檔案的路徑"。

(4) 將上傳檔案的路徑修改權限，everyone完全控制(懶人做法)。

(5) 在 aspx 網頁 ckEditor 元件下面加上以下的程式，注意 ckFinder 的路徑要對。
<script>
            CKEDITOR.replace('<%=CKEditor1.ClientID%>',
            {
                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'
            });
</script>


(6) 因為上傳的路徑是後台(/ckfinder/uploads/)，前台在顯示圖片時URL會套用後台的上傳路徑 (EX:http://前台/ckfinder/uploads/)，所以要手動改成抓後台的路徑才能正常顯示圖片(EX:http://後台/ckfinder/uploads/)，或是一開始就將上傳路徑放在前台能抓到的地方也行。

  
以上簡單說明 ckEditor 如何開啟上傳圖片的功能，ckEditor 還有很多 plugin，例如如何開啟支援從 Word 複製貼上，官方說明都很詳細，有需要的請自行上去研究研究囉~


參考來源：ckEditor