不論是網站內容管理系統、網誌、論壇、電子郵件，通常會有讓使用者填寫文字內容的編輯器，使用者可以使用這簡易的編輯器來達到想要呈現的畫面，編輯完成後就可以渲染出 Html 在前台，本篇就要來介紹這強大的 CKEditor5 文本編輯器！
這邊會先分為兩個部分來操作：
在線設定編譯 CKEditor 插件
在 Vue 專案加入 CKEditor
在線設定編譯 CKEditor 插件首先，先進入 CKEditor5 官網，並依下列步驟進行操作
1. Type-選擇類型CKEditor5 提供多種類型，這邊選擇最常用的 Classic 經典模式
2. Plugin-選擇插件根據要使用的插件加入，注意裡面有 PREMIUM 標籤是要收費的，這邊先把所有免費的插件都全 Add
3. Toolbar-選擇工具列、排序根據想預設顯示的工具列去做顯示與排序
4. Language-選擇語言依專案想要顯示的語言去做選擇，我這邊選擇英語 English
5. Download-編譯都設定好後，點擊 Start 開始進行 build 編譯
差不多過一分鐘後就會出現 Download your custom CKEditor 5 build 的按鈕
點擊後會得到一個壓縮檔，解壓縮後放到 Vue 專案，接下來就是進行專案的部分
在 Vue 專案加入 CKEditor1. 安裝 ckeditor5-vue12345# npmnpm i @ckeditor/ckeditor5-vue# yarnyarn add @ckeditor/ckeditor5-vue
2. 安裝剛剛自定義的 ckeditor12345# npmnpm i file:./ckeditor5-38.1.0# yarnyarn add file:./ckeditor5-38.1.0
安裝好後可以在 package.json 看到
3. 引入組件，全域引入或組件引入依專案使用程度來選擇全域或組件引入，請擇一使用如多頁面都會使用到可使用全域引入少數頁面會使用可使用組件引入
全域引入main.js
12345import { createApp } from 'vue'import App from './App.vue'import CKEditor from "@ckeditor/ckeditor5-vue";createApp(App).use(CKEditor).mount('#app')
組件引入123import CKEditor from "@ckeditor/ckeditor5-vue";import { Editor as ClassicEditor } from "ckeditor5-custom-build/build/ckeditor";const ckeditor = CKEditor.component;
4. 加入 ckeditor 在頁面中1234567891011121314151617181920212223
開啟畫面看，就會出現編輯器了！
5. config 設定我們可以對 CKEditor5 再做一些設定，像是 placeholder、工具列等等當然，如果你想使用預設，可以跳過這一步
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071const ckeditorState = reactive({ editor: ClassicEditor, editorConfig: { toolbar: { items: [ "undo", "redo", "|", "findAndReplace", "selectAll", "|", "heading", "|", "removeFormat", "bold", "italic", "strikethrough", "underline", "code", "subscript", "superscript", "|", "specialCharacters", "horizontalLine", "pageBreak", "|", "-", "highlight", "fontSize", "fontFamily", "fontColor", "fontBackgroundColor", "|", "link", "blockQuote", "insertTable", "uploadImage", "|", "bulletedList", "numberedList", "todoList", "|", "outdent", "indent", "alignment", "|", "sourceEditing", ], shouldNotGroupWhenFull: true, }, placeholder: "請輸入內容...", htmlSupport: { allow: [ { name: /.*/, attributes: true, classes: true, styles: true, }, ], }, removePlugins: [ 'Title', 'Markdown' ], poweredBy: { position: 'inside', side: 'left', label: 'This is' } },});
toolbar：工具列的顯示與排序
htmlSupport：html 支援
removePlugins：不使用的插件
poweredBy：免費版的 CKEditor 預設會出現版權的標誌在右下角，可在 poweredBy 設定位置
更多的設定可參考 CKEditor5 文件
最後就大功告成囉！！🎉
結語之前也有用過 Quill 來做編輯器，但在渲染 HTML 時看起來有些落差，因為 Quill 使用自己的 Delta 格式來表示文字樣式，而不是使用傳統的 HTML 標籤，不曉得這部分有沒有解，不過之後改用 CKEditor5 就解決了這個問題，以後應該會直接選擇 CKEditor5 來做編輯器了！少走一點冤枉路 😄
ReferenceCKEditorvue3安装在线构建ckeditor5教程CKEditor5+vue3使用以及如何添加新工具栏，自定义设置字体fontFamily
🚀線上課程分享
線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。
Hahow
Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住
六角學院
如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！
Udemy
Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。