Lala Code

Lala 的前端大補帖，歡迎一起鑽研前端技術😊

0%

簡單易懂的 Vue + CKEditor5 教程：打造自訂化文本編輯器

發表於 分類於 Disqus：

CKEditor5

不論是網站內容管理系統、網誌、論壇、電子郵件，通常會有讓使用者填寫文字內容的編輯器，使用者可以使用這簡易的編輯器來達到想要呈現的畫面，編輯完成後就可以渲染出 Html 在前台，本篇就要來介紹這強大的 CKEditor5 文本編輯器！


這邊會先分為兩個部分來操作：

  • 在線設定編譯 CKEditor 插件
  • 在 Vue 專案加入 CKEditor


在線設定編譯 CKEditor 插件

首先，先進入 CKEditor5 官網，並依下列步驟進行操作



1. Type-選擇類型

CKEditor5 提供多種類型，這邊選擇最常用的 Classic 經典模式

CKEditor5-type



2. Plugin-選擇插件

根據要使用的插件加入，注意裡面有 PREMIUM 標籤是要收費的，這邊先把所有免費的插件都全 Add

CKEditor5-Plugin



3. Toolbar-選擇工具列、排序

根據想預設顯示的工具列去做顯示與排序

CKEditor5-Toolbar



4. Language-選擇語言

依專案想要顯示的語言去做選擇，我這邊選擇英語 English

CKEditor5-Language



5. Download-編譯

都設定好後，點擊 Start 開始進行 build 編譯

CKEditor5-Download

差不多過一分鐘後就會出現 Download your custom CKEditor 5 build 的按鈕

CKEditor5-Download

點擊後會得到一個壓縮檔，解壓縮後放到 Vue 專案，接下來就是進行專案的部分

CKEditor5-build



在 Vue 專案加入 CKEditor

1. 安裝 ckeditor5-vue

1
2
3
4
5
# npm
npm i @ckeditor/ckeditor5-vue

# yarn
yarn add @ckeditor/ckeditor5-vue


2. 安裝剛剛自定義的 ckeditor

1
2
3
4
5
# npm
npm i file:./ckeditor5-38.1.0

# yarn
yarn add file:./ckeditor5-38.1.0

安裝好後可以在 package.json 看到

package.json



3. 引入組件，全域引入或組件引入

依專案使用程度來選擇全域或組件引入，請擇一使用
如多頁面都會使用到可使用全域引入
少數頁面會使用可使用組件引入

全域引入

main.js

1
2
3
4
5
import { createApp } from 'vue'
import App from './App.vue'
import CKEditor from "@ckeditor/ckeditor5-vue";

createApp(App).use(CKEditor).mount('#app')

組件引入

1
2
3
import CKEditor from "@ckeditor/ckeditor5-vue";
import { Editor as ClassicEditor } from "ckeditor5-custom-build/build/ckeditor";
const ckeditor = CKEditor.component;


4. 加入 ckeditor 在頁面中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script setup>
import CKEditor from "@ckeditor/ckeditor5-vue";
import { Editor as ClassicEditor } from "ckeditor5-custom-build/build/ckeditor";
const ckeditor = CKEditor.component;
import { ref, reactive } from "vue";

const content = ref("")

const ckeditorState = reactive({
  editor: ClassicEditor,
  editorConfig: {},
});
</script>

<template>
  <main>
    <ckeditor
      :editor="ckeditorState.editor"
      v-model="content"
      :config="ckeditorState.editorConfig"
    ></ckeditor>
  </main>
</template>

開啟畫面看，就會出現編輯器了！

ckeditor



5. config 設定

我們可以對 CKEditor5 再做一些設定，像是 placeholder、工具列等等
當然，如果你想使用預設，可以跳過這一步

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
const 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 文件



最後就大功告成囉！！🎉
CKEditor



結語

之前也有用過 Quill 來做編輯器，但在渲染 HTML 時看起來有些落差，因為 Quill 使用自己的 Delta 格式來表示文字樣式，而不是使用傳統的 HTML 標籤，不曉得這部分有沒有解，不過之後改用 CKEditor5 就解決了這個問題，以後應該會直接選擇 CKEditor5 來做編輯器了！少走一點冤枉路 😄



Reference

CKEditor
vue3安装在线构建ckeditor5教程
CKEditor5+vue3使用以及如何添加新工具栏，自定义设置字体fontFamily



🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！



🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住



六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！


Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。
❤️