iT邦幫忙

2021 iThome 鐵人賽

DAY 10
1
Modern Web

從實作學習ASP.NET Core - 30天的購物網站系列 第 10

【從實作學習ASP.NET Core】Day10 | 後台 | 文字編輯器 CKEditor

CKEditor

官方網站:CKEditor 5 | Powerful Framework with Modular Architecture
CKEditor,舊稱 FCKeditor,是一個專門使用在網頁上屬於開放原始碼的文字編輯器。它志於輕量化,不需要太複雜的安裝步驟即可使用。它可和 PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及 ABAP 等不同的程式語言相結合。

CKEditor 5 CDN

官方有提供 CKEditor 5 CDN 來直接使用,有提供ClassicInlineBalloonBalloon-blockDocument5種樣板可選擇,優點在於加載速度更快但是只有部分功能。

再 html 頁面上引用 CDN ,配合呼叫 ClassicEditor.create() 就可以呼叫 CKEditor

<script src="https://cdn.ckeditor.com/ckeditor5/29.2.0/classic/ckeditor.js"></script>

<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>


如果想要用到完整功能會需要下載官方原始檔配合說明文件用npm把功能安裝到檔案後建置......
或是用這個簡單到爆的 Custom build ,線上幫你把功能包到好,連範例通通送給你,對我這種不懂 npm 的人真是一大福音

CKEditor 5 Custom build

到官方下載點選 Custom build 選擇要加入的功能,我這邊就多選Alignment Font Size Font Color


接著下載打包完的檔案,解壓縮並把資料夾丟到專案底下/wwwroot/lib

接下來只要在前端引入檔案

<script src="~/lib/ckeditor5/build/ckeditor.js"></script>

加入下面<textarea>作為編輯器的位置,並用下面的js渲染

<div class="form-group">
    <label asp-for="Content" class="control-label"></label>
    <textarea asp-for="Content" class="form-control" id="editor"></textarea>
    <span asp-validation-for="Content" class="text-danger"></span>
</div>
<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ), {	
            toolbar: {
					items: [
						'heading','|','bold','italic','link','bulletedList','numberedList',
						'|','alignment','outdent','indent','|','fontSize','fontColor',
						'|','imageUpload','blockQuote','insertTable','mediaEmbed',
                        'undo','redo'
					]
				},
				image: {
					toolbar: [
						'imageTextAlternative','imageStyle:inline',
						'imageStyle:block','imageStyle:side'
					]
				},
				table: {
					contentToolbar: [
						'tableColumn','tableRow','mergeTableCells'
					]
				},
					licenseKey: '',
				} )
				.then( editor => {
					window.editor = editor;
				} )
				.catch( error => {
					console.error( 'Oops, something went wrong!' );
					console.error( error );
				} );
</script>


登登! 文章縮排和調整文字顏色大小的功能就都加上去囉!


Create頁面就到這邊完成了,試著新增幾筆資料上去看看吧!


上一篇
【從實作學習ASP.NET Core】Day09 | 後台 | 圖片上傳與預覽
下一篇
【從實作學習ASP.NET Core】Day11 | 後台 | 詳細資料與 ViewModel
系列文
從實作學習ASP.NET Core - 30天的購物網站30

1 則留言

0
C#.NET
iT邦新手 4 級 ‧ 2021-09-22 14:33:40

讚!

我要留言

立即登入留言