本文章已經偏舊，但是主要架構不變。最近幾個版本官方已經改為使用 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。
