2015-02-18

[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

沒有留言:

張貼留言