CKEditor 5 重製版 — 自己動手包起來
案子需要WYSIWYG（所見即所得）編輯器怎麼辦？來，我們一步一步做給你看
Genesis
續CKEditor 5 重製版 — 需求談起來，需求談完了，買菜送蔥也搞定了，那麼這篇來真槍實彈吧！
Concept
看了一下官網的說明有四種方法可以安裝，一開始我並沒有詳細的閱讀完整個文件（很懶惰的壞習慣，千萬不要學！）所以直接就無腦地選擇了npm安裝，因為很直覺得認為npm install之後，剩下交給phoenix webpack去合併打包就搞定了。
There are several options to download CKEditor 5 builds:
其實一開始的想法跟實際上執行的結果並沒有太大的出入，唯一的問題是我不夠熟悉CKEditor 5的運作方式。
複習一下我們的需求，邊看看CKEditor 5提供的五種編輯器樣式
The following CKEditor 5 Builds are currently available:
我們需求的前三樣都可以用上面的Classic editor build來滿足，但第四樣的字型顏色，就會需要用到@ckeditor/ckeditor5-font這個plugin了！
所以我們只要先@ckeditor/ckeditor5-build-classic，再來安裝上面的那個font不就好了？
先說結果好了，你會遇到這個『Some CKEditor 5 modules are duplicated』的抱怨；原因是因為我們用的基底build-classic其實是人家幫我們打包好的一個版本，裡面已經有基本的core source；而後來再安裝的ckeditor5-font裡面其實也包含了基本的core source，所以就重疊了！
所以我選擇了另一個CKEditor官網推薦的作法，也就是自己git clone回來，然後再build一個自己的build給這個專案使用。這麼做的優點是可以更詳細的只打包專案需要的功能就好，用不到的我們就把它拿掉不打包即可；缺點嘛，就是會多花五分鐘不到的時間？？！！
那就直接開始吧！
Steps
先講一下大概的流程好了，我們分成兩部分；本篇是依照我們的需求來客製化需要的CKEditor 5。在Elixir / Phoenix — CKEditor 5導入篇會把打包完的結果，喂給Phoenix的專案來吃，最後再透過Phoenix Framework的Webpack來產生一隻合併過的app.js。
preprocess
我們會用到一些工具，你可以用homebrew或其它套件管理器來安裝：
- Git
- yarn
- IDE/Text Editor（任何你習慣用的就好）
CKEditor 5
在這裡有可以供大家修改或者是組裝的core libs及builds。當然，我相信改法絕對不只一種，建議大家還是認真的看一下文件介紹，也許可以更省時間找到符合你需求的修改方式。
我自己是認為用ckeditor5-build-classic，刪除掉我不需要的功能之後，再加上我需要的ckeditor5-font會比較適合我。以下的操作也是基於這個選擇所進行的方式。
首先，先到ckeditor5-build-classic把這個build的source code fork一份回自己的git repository，以下會用我自己的repository當範例，記住用你自己的喔，這樣你才可以自己把修改push上去，如果很常用的話，你還可以貢獻自己的build出來給大家玩。
$ git clone git@github.com:denielchiang/ckeditor5-build-classic.git
Cloning into 'ckeditor5-build-classic'...
remote: Enumerating objects: 83, done.
remote: Counting objects: 100% (83/83), done.
remote: Compressing objects: 100% (67/67), done.
remote: Total 5206 (delta 24), reused 36 (delta 16), pack-reused 5123
Receiving objects: 100% (5206/5206), 19.03 MiB | 1002.00 KiB/s, done.
Resolving deltas: 100% (3644/3644), done.然後我們先把基本需要的deps都裝起來吧
$ cd ckeditor5-build-classic && npm install下一步是把額外的plugin也安裝進我們的這個build裡；額外的意思是不包含在這個build裡面的功能，你可以在ckeditor5-build-classic的source裡看到他有import了一些這個build所定義的功能。因為ckeditor5-font不在這裡面，所以我們需要再把他裝進這個build的source裡面來。
$ npm install --save-dev @ckeditor/ckeditor5-font然後我們打開src/ckeditor.js來編輯我們需要的內容
首先在Line 33先import Font進來
$ vim src/ckeditor.js
.....import Font from '@ckeditor/ckeditor5-font/src/font';.....
然後把Font加進Plugins list，讓這個Font被呼叫
ClassicEditor.builtinPlugins = [
.....
Font,
.....
];接下來視你喜歡的UI排列，把工具列上的font選項設定進去ClassicEditor.defaultConfig list裡面；這個ClassicEditor.defaultConifg list主要是可以讓你編輯這個編輯器的預設設定值。而且toolbar.items的順序也剛好是工具列由左到右的顯示順序喔！
在Font裡可以設定的選項，CKEditor 5 的API裡可以找得到，根據需求，我們先只放fontColor跟fontSize就好；fontFamliy可以設置中文字體，這塊又可以連結到Google Fonts的導入，選擇更適合中文的字體，但這次已經被我收斂掉囉，我們就留給大家自己玩。
// Editor configuration.
ClassicEditor.defaultConfig = {
toolbar: {
items: [
.....
'fontColor',
'fontSize',
.....
]
},
.....為什麼說是「預設設定值」，是因為你還是可以透過javascript來做第二次的customize，但我們既然都已經準備手工做一個自己的編輯器了，那我們就先照需求裡的功能來當作預設設定值，以後如果客人有Requirement Change了，我們再使用javascript來做第二次設定調整就好。
最後記得要加上中文語系的設定，結束這個回合！
// This value must be kept in sync with the language defined in webpack.config.js.
language: 'zh'};
然後我們先來檢查一下看看，修改出來的結果是不是我們期望的
$ yarn run build
yarn run v1.22.4
$ webpack --mode production
Hash: 201534e41a470bbe8518
Version: webpack 4.42.0
Time: 16504ms
Built at: 03/20/2020 9:17:06 PM.....Entrypoint main [big] = ckeditor.js ckeditor.js.map
[9] (webpack)/buildin/harmony-module.js 573 bytes {0} [built]
[10] (webpack)/buildin/global.js 472 bytes {0} [built]
[98] ./src/ckeditor.js + 595 modules 3.01 MiB {0} [built]
| ./src/ckeditor.js 2.92 KiB [built]
| + 595 hidden modules
+ 556 hidden modules
✨ Done in 19.23s.
他有內建一個demo頁面可以檢查設定後的結果是不是我們所期望的結果
$ open sample/index.html我們修改前的demo頁面工具列長這樣
修改後的工具列
有發現了嗎？多了兩個選項出來！而且顏色跟大小的功能也都可以使用了！
接下來，讓我們來reduce這個lib，把需求上用不到的從ckeditor.js上移除！並且記得在打包前先把webpack-config也設定為顯示語言只需要zh就好！
一樣build一下並且跑個測試頁來確認一下有沒有改錯
$ yarn run build
yarn run v1.22.4
$ webpack --mode production
Hash: 5158c01dd82fb2528881
Version: webpack 4.42.0
Time: 13939ms
Built at: 03/22/2020 6:08:16 PM
Asset Size Chunks Chunk Names
ckeditor.js 468 KiB 0 [emitted] [big] main
ckeditor.js.map 3.23 MiB 0 [emitted] [dev] main
translations/zh.js 893 bytes [emitted]
Entrypoint main [big] = ckeditor.js ckeditor.js.map
[9] (webpack)/buildin/harmony-module.js 573 bytes {0} [built]
[10] (webpack)/buildin/global.js 472 bytes {0} [built]
[64] ./src/ckeditor.js + 463 modules 2.42 MiB {0} [built]
| ./src/ckeditor.js 1.16 KiB [built]
| + 463 hidden modules
+ 523 hidden modules
✨ Done in 17.20s.$ open sample/index.html
Bold、Font Color、Font Size都顯示了，其他附加基本功能也調整成最小符合需求的工具列了。並且你可以從yarn build看到ckeditor.js變小了（phoenix framework有500kb的提醒），且語言包從原本的一大包剩下台灣正體中文而已。
Well done!! 我們去除了不必要的code了！接下來就要餵給Phoenix Framework來處理了。其他還沒有接觸過Elixir / Phoenix的朋友也推薦收看下一集喔！也許會給你目前的程式語言或框架帶來一些靈感也不一定呢！
