iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0
自我挑戰組

Asp.Net Core 零基礎建立自己的Blog系列 第 7

[Day 7] Asp.net core MVC Ckeditor5 安裝

  • 分享至 

  • xImage
  •  

直接講重點:
目前我們要做的是,可以上傳圖片的CKEditor5 功能。

前面一章,複製完前端程式碼之後,會發現引用的Ckeditor檔案是沒有的,所以開啟頁面後也不能用,今天就趕快來講如何安裝CKeditor5。

大多數教學文,都會用cdn的方式引用CKeditor5,不是不好但是這樣的引用會用到CKeditor5一些要付費的套件功能,雖然不用也不會怎樣,但是從網頁的開發人員視窗去查看,會看到很多錯誤,為了避免看到較多的錯誤訊息,這邊我們要自己建立一個CKeditor5的套件。

目標:
1.安裝CKeditor

步驟:
step1.到CkEditor5 官網下載套件。
https://ckeditor.com/ckeditor-5/download/

step2.建議選擇自訂的 (紅色圈起來的地方)
https://ithelp.ithome.com.tw/upload/images/20220917/20125853JdWUwbArkw.png

step3.一定要把圖片相關的選起來,發文就是要發圖片阿。然後一定要選擇CKFinder upload adapter 。
https://ithelp.ithome.com.tw/upload/images/20220917/20125853hsp4FUn3co.png

step4.最後選好語言後,就下載下來就好了,接著裝到程式裏面。
(我會有兩個Ckeditor是因為我在測試東西~,所以裝了兩個,那你們就新增一個就好了。)
https://ithelp.ithome.com.tw/upload/images/20220917/20125853bCxDjRfRco.png

step5. 比對CreateArticle.cshtml的引用部分。
https://ithelp.ithome.com.tw/upload/images/20220917/20125853revCkGJUi9.jpg

執行起來如果有看到畫面那就對囉~
https://ithelp.ithome.com.tw/upload/images/20220917/20125853Sw35h9UVoc.png

今天就先到這裡~ 明天見!


上一篇
[Day 6] 建立發文頁面 View 及 asp.net core mvc 傳直到View的方法
下一篇
[Day 8] Asp.Net core MVC - Ckeditor5 圖片上傳(一)
系列文
Asp.Net Core 零基礎建立自己的Blog30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言