CKEditor 5 教學 (二)，客製化編輯器的功能列

程式技術

•

2020-08-10

•

CKEditor JavaScript CSS

本文章已經偏舊，但是主要架構不變。最近幾個版本官方已經改為使用 TypeScript 作為主要語言。

在上一篇文章中，我們簡單介紹了一下 CKEditor 如何安裝。

CKEditor 雖然功能非常多，但預設的功能非常少，需要我們再進行額外的設定。在這篇文章中，會講述如何客製化一個屬於自已的 WYSIWYG 編輯器。

此篇文章主要講述兩個部分：

編輯區塊上下高度太窄？
新增功能，讓縮排與凸排活過來。

編輯區塊上下高度太窄？

一開始完成安裝的 CKEditor，編輯區塊上下高度並不高。

這時候可以創建一個 css 檔案 editor.css，然後在編輯器的頁面中引入。

<link href="你的路徑/editor.css" rel="stylesheet">

在這個 editor.css 中，簡單的加上一段 CSS 代碼。

/* CKEditor 編輯區塊 */
.ck-editor__editable_inline {
	/* 設定最低高度 */
    min-height: 500px;
}

這時重新整理頁面你就可以看到編輯器的高度順利的變高拉。

新增功能，讓縮排與凸排活過來

一開始雖然可以看到功能列上有縮排與凸排，但是兩個是呈現灰色無法點擊的狀態。即使你在編輯區塊中打上字，仍然無法使用凸排與縮排的功能。

接下來，我們要來幫 CKEditor 新增套件，讓縮排與凸排可以正常使用。首先讓我們先到 ckeditor5/package/ckeditor5-build-classic 資料夾底下。

在這裡，我們先用 npm 安裝縮排與凸排的套件。

npm install @ckeditor/ckeditor5-indent

然後進到 src 資料夾底下，可以看到一個檔案 ckeditor.js。這個檔案就是讓你可以對編輯器進行新增功能與客製化的地方，大致可以分成 3 個區塊。

最上面第一個區塊，是引入 npm 套件的地方。我們在最下面引入剛剛用 npm 安裝好的縮排與凸排的套件。

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
.
.
.
// 下方為新增的套件
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';

中間的區塊，是使用 npm 去 build 時，會載入的套件。此段程式碼的最下面，我們一樣補上剛剛 import 的 IndentBlock。

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
	Essentials,
	UploadAdapter,
	Autoformat,
	Bold,
	Italic,
	BlockQuote,
.
.
.
	// 下方為新增的套件
	IndentBlock,
];

最下面的區塊，就是可以新增功能與客製化編輯器的地方啦！

由於預設就有 indent (縮排) 與 outdent (凸排)，因此這裡可以不用調整。

// Editor configuration.
ClassicEditor.defaultConfig = {
	// 編輯器上方功能列的顯示與排列
	toolbar: {
		items: [
			'heading',
			'|',
			'bold',
			'italic',
			'link',
			'bulletedList',
			'numberedList',
			'|',
			'indent',
			'outdent',
			'|',
			'imageUpload',
			'blockQuote',
			'insertTable',
			'mediaEmbed',
			'undo',
			'redo'
		]
	},
	image: {
		toolbar: [
			'imageStyle:full',
			'imageStyle:side',
			'|',
			'imageTextAlternative'
		]
	},
	table: {
		contentToolbar: [
			'tableColumn',
			'tableRow',
			'mergeTableCells'
		]
	},
	// This value must be kept in sync with the language defined in webpack.config.js.
	language: 'en'
};

一切都妥當之後，回到 ckeditor5/package/ckeditor5-build-classic 資料夾底下。

使用 npm 的 build 指令，重新產出一個 CKEditor 的 JS file。

npm run build

等 build 結束之後，如上一篇文章所述，將 build 資料夾複製到你的網站專案中。

這邊要注意一點，套件 (Plugin) 的版本號必須與 ckeditor 5 的版本相同。

如果安裝的套件發現顯示的版本比 ckeditor 5 還要新時，建議重新 git clone 最新版本的 ckeditor 5，並重新安裝套件，設定 ckeditor.js 與 build 一個新版本。

否則會有機會遇到 duplicated modules (模組重複載入) 的問題。

重新整理網頁之後，編輯器上的縮排與凸排就可以正常使用拉。

如果發現網頁重新整理之後，編輯器沒有變化，是因為網頁快取 (Cache) 的關係。
一般瀏覽器為了讓網頁載入的速度更快，會自動幫網頁需要載入的 JS 與 CSS 檔案建立快取。避免每次開啟網頁都要重新載入這些檔案。
這時候可以使用快捷鍵 Ctrl + F5，使瀏覽器在重新整理的時候，重新載入 JS 與 CSS。