MVC 使用CKEditor

第一使用CKEditor..,記錄一下所需功能的安裝過程。

Nuget安裝 ckeditor-standard

image

裝完後,引用所需的.js檔,及網頁載入的初始設定

image

  1. 取代content text area 為 html editor。
  2. 指定上傳圖檔到後端的Url。
  3. 指定skin,更多skin可以到官網下載

執行畫面

image

MVC Controller 接收上傳的圖檔

新增Upload Action接收CKEditor傳入的參數,並於上傳結束後回傳CKEditorFuncNum及圖檔的url給前端的function。

image

安裝Plugin

在Nuget安裝後,預設的圖片上傳plugin (image),功能較陽春。所以我安裝官方介紹的另一套件Enhanced Image。支援圖片使用拖曳方式來移動、調整大小等。下載及其他相依 plugin,Enhanced Imagewidgetlineutils。下載後,放在plugin目錄下

image

執行畫面,預設會Foucs在第一個預設的image info tab
image

透過設定,預設切換到upload tab上

image

image

範例程式

https://github.com/kimx/CKEditorLab

這個網誌中的熱門文章

[.NET Core] 將專案發行至IIS

[TFS] 分支與合併