CKEditor 5 教學（一），在網站中使用 CKEditor 5

CKEditor 是一款老牌的富文本編輯器 (Rich Text Editor)
這類編輯器最大特性就是 WYSIWYG (What You See Is What You Get)
原本 CKEditor 4，因為年代較為久遠，所以官方後來重新打造，也就有了現在的 CKEditor 5

這裡以 CKEditor 5 為例，向大家介紹如何在自己的 Laravel 專案上安裝 CKEditor 5

安裝 CKEditor 5

首先 CKEditor 5 分為很多個版本，這篇文章會以 Classic editor 為例

Classic editor
Inline editor
Balloon editor
Balloon block editor
Document editor

你可以使用多種方式來安裝 CKEditor
可以透過 npm、CDN 或是直接到他們官網 or github 上面下載
我們先到 Github 上面下載 Clone 一份

下載後的資料夾內容是這樣的

這時我們打開 packages 資料夾，然後往裡面找 ckeditor5-build-classic

將裡面的 build 資料夾複製到你的網站專案中

這樣如果我們要讓頁面套入 CKEditor，只要網頁上使用下面的 HTML 代碼

<div id="editor">
	<p>請在這裡填寫內容</p>
</div>

然後在網頁的尾端載入 JS 程式碼的部分

<script src="你的路徑/build/ckeditor.js"></script>
<script>
ClassicEditor.create( document.querySelector( '#editor' ), {
	// 這裡可以設定 plugin
})
	.then( editor => {
		console.log( 'Editor was initialized', editor );
	 })
	 .catch( err => {
		console.error( err.stack );
	 });
</script>

這時候開啟瀏覽器，應該就可以看到你的頁面上出現 CKEditor 5 編輯器了

上面的 div 標籤是用來標明要在網頁何處插入 CKEditor 編輯器，這是官方文件的寫法，但是一般來說，如果要送出表單的話，我們還是會使用 textarea 標籤

所以將剛剛的 div

<div id="editor">
	<p>請在這裡填寫內容</p>
</div>

改成 textarea

<textarea id="editor" name="content" placeholder="請在這裡填寫內容"></textarea>

CKEditor 預設的功能其實不多，其中呈現灰色部分的縮排與凸排，還是無法使用的狀態

之後會再說明如何增加並客製化自己想要的功能