主程式 | CKEditor |
|---|---|
外掛 | Code Snippet |
支援版本 | CKEditor 4.4 以後 |
功能 | 可以在文章內加入經過排版＆美化的程式碼片段。 內建幾個由 highlight.js 提供的 Theme 美化視覺。 |
原本是要查其它的 CKEditor issue，
意外發現原來他們有提供插入程式碼片段＆美化的外掛 = 我一直很想要的功能，
所以就丟下原本的 issue 去裝外掛了
。
Code snippet 並沒有包含在預設的 CKEditor 檔案內，
所以你可以選擇線上勾選需要的所有外掛後一次下載，
或者像我一樣下載後另外加入到 plugins 裡面。
到 Code snippet 官網下載壓縮檔
解壓縮後整包放到 plugins 資料夾底下
找到你的 CKEditor config 檔，加上 extraPlugins 及 codeSnippet_theme 兩個值。
如果沒有客製 toolbar 的話這時應該就已經可以看到了，
但因為我的有客製所以必須再加上 Icon 設定。
加完之後就會出現啦～
因為 Code Snippet 的外掛安裝說明並沒有寫到客製 toolbar 的部分，
所以我先從 { name: 'codesnippet', items: [ 'codesnippet' ] } 試起，
改成 { name: 'codesnippet', items: [ 'Codesnippet' ] } 還是失敗。
後來發現下載的檔案裡有一個 samples 資料夾，
將裡面的 codesnippet.html 用 vscode 打開後，
搜尋 codesnippet 可以搜到初始 CKEditor 的 config
所以後來改成 { name: 'codesnippet', items: [ 'CodeSnippet' ] } 才成功。
只能說大小寫差一個字真的差很多（撒淚）
