俗話說得好，『工欲善其事，必先利其器』。所以我們要使用網頁專門的文字編輯器前，必須先選好合適的編輯器。筆者一開始是從 Froala、TinyMCE、CKEditor，三種文字編輯器中挑選，因為 Froala 和 TinyMCE 都需要費用，而 CKEditor 除了基本功能免費之外，也是歷史最悠久、最多用戶使用的編輯器，所以筆者最終選擇了它，CKEditor！
CKEditor 5
CKEditor，舊稱 FCKeditor，是一個專門使用在網頁上屬於開放原始碼的文字編輯器。它志於輕量化，不需要太複雜的安裝步驟即可使用。它可和 PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及 ABAP 等不同的程式語言相結合。
CKEditor 目前有兩個版本 CKEditor 4 和 CKEditor 5，而 CKEditor 4 和 CKEditor 5 就像 AngularJS 和 Angular 一樣，CKEditor 5 為了因應未來的前端需求，是完全打掉重寫，不相容 CKEditor 4 的程式，API 和介面都是新的。 CKEditor 5 雖然功能暫時比較少，並持續在開發中；但操作和介面筆者相較喜歡，有加入響應式的設計。加上 CKEditor 5 是因應未來所設計，所以筆者最終選擇了 CKEditor 5！接下來的分享，都是使用 CKEditor 5。
CKEditor 5 CDN
我們可以不下載 CKEditor 5，藉由官方提供的 CKEditor 5 CDN 來直接使用。優點在於加載速度更快、減少 HTTP 請求數量，這些加速了我們的網站；但缺點是不包含完整功能，CKEditor 5 將功能模組化，想要加入其他模組，需使用 npm、webpack 重新打包程式，這在後面筆者會再詳細講解。
註：CDN ( Content Delivery Network 或 Content Distribution Network )是指一種透過網際網路互相連接的電腦網路系統，利用最靠近每位使用者的伺服器，更快、更可靠地將音樂、圖片、影片、應用程式及其他檔案傳送給使用者，來提供高效能、可擴展性及低成本的網路內容傳遞給使用者。
我們想要使用 CKEditor 5 CDN，首先要在 HTML 頁面中添加一個<script>標籤：<script src="https://cdn.ckeditor.com/ckeditor5/[version.number]/[distribution]/ckeditor.js"></script>
目前官方提供以下五種 distribution 可以使用：
- classic — the Classic editor
- inline — the Inline editor
- balloon — the Balloon editor
- balloon-block — the Balloon block editor
- decoupled-document — the Document editor
如果讀者想要 distribution 詳解，請閱讀：CKEditor 5 Builds overview
Quick_Example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/
16.0.0/classic/ckeditor.js">
</script>
</head>
<body>
<div id="editor">This is some sample content.</div>
<script>
ClassicEditor
.create(document.querySelector(
'#editor'))
.then(editor=>{
console.log(editor);
})
.catch(error=>{
console.error(error);
});
</script>
</body>
</html>基本上，上面範例我們可以注意到幾點。首先 <script> 標籤，把 CKEditor 5 CDN 匯入進來，這樣才能使用 CKEditor 5，而範例是使用 classic 版本。接下來會發現它們是用 id="editor" 來做傳送的標記，其對應到的就是 #editor，這一點很重要！至於要使用 <div> 或 <textarea> 其實都可以，看讀者的需求，筆者自己在工作上是使用 <textarea>。
.then() 和 .catch() ，是當成功產生 CKEditor 5 文字編輯器時，會跑 .then() 的內容；反之出現錯誤的話，會去執行 .catch() 的內容。
console.log(editor) 印出來的 Sb當我們使用瀏覽器 Chrome 開啟 Quick_Example.html，我們會看到上排有工具列，這是 classic 版本的預設編制，如果我們想要更動工具，添加或刪除都是可以的！只要在 .create() 裡面添加 toolbar 這個 Array 變數即可。
Customize_Example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/
16.0.0/classic/ckeditor.js">
</script>
</head>
<body>
<div id="editor">This is some sample content.</div>
<script>
ClassicEditor
.create(document.querySelector(
'#editor'),{
toolbar:['bold','italic','link',
'bulletedList',
'numberedList',
'|','outdent','indent']
})
.then(editor=>{
console.log(editor);
})
.catch(error=>{
console.error(error);
});
</script>
</body>
</html>Customize_Example.html，為我們自定義工具列的範例。藉由 toolbar 裡面的元素，就可以放置我們想要的工具，擺脫 classic 的預設編制。當然工具不僅範例裡面的，還有好多好多，有興趣的話請前往下面的傳送門觀看哦！
官方文件：Configuration — CKEditor 5 Documentation
CSDN 博客：富文本编辑器CKEditor 5的使用
筆者使用了上排的工具列，讓文字內容呈現出不同樣貌；但不知道讀者們有沒有發現，最右邊的兩個縮排功能並沒有使用到，而且按鈕是淡灰色。沒錯！現在這兩顆按鈕是失效的，原因是雖然我們在 toolbar 把它們加入其中，但 classic 版本是沒有縮排模組的(啥咪)，所以我們必須要先捨棄 CKEditor 5 CDN，要使用 npm 來 build 出專屬套件的 CKEditor 5。
註：npm( Node Package Manager，即『node包管理器』)是 Node.js 預設的，以 JavaScript 編寫的軟體套件管理系統。所以只要安裝 Node.js 就會擁有 npm，如果讀者還未安裝，請到官方 Download | Node.js 這邊安裝。
Build 出專屬的 CKEditor 5
如果讀者評估 CKEditor 5 CDN 的預設模組足夠使用的話，當然接下來的實作就可以不用；但預設模組實在很少，往往會遇到不夠使用的情形，就變成勢必要自己打包套件，build 出專屬自己的 CKEditor 5，所以筆者是覺得這項技能很重要！這次用不到，未來肯定會用的到，那麼開始講解囉！
首先到 GitHub 下載原始碼：GitHub — ckeditor/ckeditor5-build-classic
下載好 ZIP 檔之後，我們就來解壓縮，筆者是存放在 D槽。
接著開啟 Node.js command prompt 將位置移動到資料夾路徑下。
執行 npm install 安裝 package.json 內 devDependencies 的指定套件。
底下就是 D:\ckeditor5-build-classic-master\package.json
devDependencies 的指定套件，npm install 會把指定套件安裝到
D:\ckeditor5-build-classic-master\node_modules
我們在指定套件中看到了縮排模組：ckeditor5-indent，代表我們已經安裝好縮排模組可以使用了。
相信直接在 Chrome 開啟 Customize_Example.html 的讀者會發現，怎麼縮排的兩顆按鈕還是淡灰色繼續保持失效呢！別急別急～那是因為我們雖然安裝好了縮排模組，但 Customize_Example.html 還是使用 CKEditor 5 CDN，並不是我們 build 的 CKEditor 5。
而在 build 之前，我們要先開啟打包套件的設定檔：
D:\ckeditor5-build-classic-master\src\ckeditor.js，開啟 ckeditor.js 會發現 Indent 有被匯入了，但這不是我們要的，真正的縮排套件其實是 IndentBlock，筆者在這邊也卡關了一陣子，所以我們要補上下圖的那一行。對縮排套件有興趣的讀者，可以到官方文件閱讀：Block indentation
當然匯入縮排套件還不夠，我們要在 build 的時候，把縮排套件打包進來，所以一樣在 ckeditor.js 繼續往下看，會看到 ClassicEditor.builtinPlugins，從上面的註解能得知：裡面擺放的就是打包套件的內容。請補上 IndentBlock 吧！
這樣我們 ckeditor.js 打包套件的設定檔就準備差不多了，來開始 build 吧！
首先再度開啟 Node.js command prompt 將位置移動到資料夾路徑下。
接著輸入 npm run build 執行，就會 build 出專屬的 CKEditor 5。D:\ckeditor5-build-classic-master\build\ckeditor.js
Customize_Example_New.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="D:\ckeditor5-build-classic-
master\build\ckeditor.js">
</script>
</head>
<body>
<div id="editor">This is some sample content.</div>
<script>
ClassicEditor
.create(document.querySelector(
'#editor'),{
toolbar:['bold','italic','link',
'bulletedList',
'numberedList',
'|','outdent','indent'],
indentBlock:{
offset:1,
unit:em
}
})
.then(editor=>{
console.log(editor);
})
.catch(error=>{
console.error(error);
});
</script>
</body>
</html>最後我們只要把 Customize_Example.html 內 <script> 的 src 參數，從原本匯入的 CKEditor 5 CDN 更改成剛剛 build 出來的 ckeditor.js 路徑即可！如果怕檔案搞混的話，我們另存成 Customize_Example_New.html。
終於要來迎接成果的一刻！我們使用瀏覽器 Chrome 開啟 Customize_Example_New.html，即會看到縮排按鈕亮起來了，你可以開心地盡情使用！如果想要調整縮排的間距，可以更動 indentBlock 裡面的參數：offset 為每次間距的數值、unit 為長度單位。
以上是我這次 CKEditor 5 文字編輯器的研究心得，其實還有『上傳圖片功能』未分享，但礙於篇幅與時間有限，所以未來有機會的話，再和讀者們分享這一塊。最後希望這篇分享能幫助到大家，如果有什麼疑問，歡迎在底下留言，大家可以一起交流。那麼我們下回見囉！掰掰～