CKEditor 5 教學 (一)，在網站中使用 CKEditor 5

程式技術

•

2020-08-01

•

CKEditor JavaScript

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、官網或是從 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 預設的功能其實不多，其中呈現灰色部分的縮排與凸排，還是無法使用的狀態。之後會再說明如何增加並客製化自己想要的功能。