Uli's blog

前端學習

0%

Vue3 + CKEditor5 基本安裝、設定語系、樣式套用

發表於 更新於 分類於 Disqus：
CKEditor5 基本使用、如何設定語系以及前台畫面如何套用樣式。

前言

CKEditor 是一款所見即所得 ( WYSIWYG ) 的文字編輯器，有豐富的功能可以使用，想要自行組合功能的話，可以到 online-builder 設定好編輯器種類、插件、工具列、語言等，就能下載使用。

另外，官方目前有提供 7 種打包好的預定義版本：

  • Classic editor
  • Inline editor
  • Balloon editor
  • Balloon block editor
  • Document editor
  • Multi-root editor
  • Superbuild

每個版本的編輯器樣式以及支援的功能都不太一樣，各版本提供的功能見文件。

預定義版本

如果想使用預定義版本的話，可以到文件選擇符合需求的版本來安裝。

基本安裝

npm 下載

這邊選擇的是 classic 版本 :

1
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

啟用 ckeditor

全域啟用 ckeditor，如果不希望全域啟用，這步驟可以跳過。

1
2
3
4
5
6
7
8
9
10
11
// main.js
import { createApp } from 'vue'

import CKEditor from '@ckeditor/ckeditor5-vue' // 加入

import App from './App.vue'

const app = createApp(App)

app.use(CKEditor) // 加入
app.mount('#app')

建立元件

有全域啟用 ckeditor 的話，就不需要再區域註冊了，直接在 vue 檔案使用元件。

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
// EditorComp.vue
<template>
  <ckeditor
    :editor="editor"
    v-model="editorData"
    :config="editorConfig"
  ></ckeditor>
</template>

<script>
  import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

  export default {
    data() {
      return {
        editor: ClassicEditor,
        editorData: '',
        editorConfig: {
          placeholder: '輸入文字',
        }
      };
    }
  }
</script>

<style>
  .ck-editor__editable {
    height: 400px;
  }
</style>
  • editor : 選擇的編輯器種類
  • editorData : 綁定的資料，可以預先塞內容進去
  • editorConfig : 編輯器設定，如果沒有其他設定的話可以不用加上去

如果有跳過前一步驟，想要區域註冊元件的話，可以這樣寫 :

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
<template>
  <ckeditor
    :editor="editor"
    v-model="editorData"
    :config="editorConfig"
  ></ckeditor>
</template>

<script>
  import CKEditor from '@ckeditor/ckeditor5-vue';
  import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

  export default {
    data() {
      return {
        editor: ClassicEditor,
        editorData: '',
        editorConfig: {
          placeholder: '輸入文字',
        }
      };
    },
    components: {
      ckeditor: CKEditor.component
    },
  }
</script>

<style>
  .ck-editor__editable {
    height: 400px;
  }
</style>

接著再把元件引入到 App.vue 後，編輯器就出現在畫面上了。

編輯器

設定語系

CKEditor 支援多語系，如果需要切換成其他語言，可以把該語言載入到程式碼中。

這邊要轉成繁體中文，所以載入 zh.js 這支檔案。

1
2
3
4
5
// main.js
...
import CKEditor from '@ckeditor/ckeditor5-vue';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh.js' // 載入語言
...

接著到元件檔案修改 editorConfig，加入 language: 'zh'。

1
2
3
4
5
6
7
// EditorComp.vue
...
editorConfig: {
  placeholder: '輸入文字',
  language: 'zh', // 加入這一行
}
...

這樣就完成語系設定了。

設定語系

樣式套用

我們將 editorData 渲染在編輯器外部時會發現引用的樣式(灰色長條形)沒有出現在左邊畫面上。

樣式未套用

這邊在渲染的外層加入 .ck-content 即可顯示樣式。

樣式有套用

但是如果今天假設是後台編輯完成後的文本要在前台渲染，單純加入 .ck-content 會無法套用樣式。

官方文件有提到:

By default, content styles are inseparable from the rest of the editor. This means there is no CSS file containing them you could take straight from the editor and use in your application (as opposed to the CKEditor 4 contents.css file).

我們無法在不存在編輯器的情況下去使用到他的樣式設定，所以才會有剛才加入 .ck-content 可以顯示樣式的情況(因為當前頁面存在編輯器)。如果為了顯示樣式而在前台頁面又載入一次編輯器也不是一個好辦法，官方的推薦做法是 : 將 CSS 樣式另外儲存起來使用。

官網有提供完整的內容樣式 :

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
/*
 * CKEditor 5 (v41.2.1) content styles.
 * Generated on Thu, 21 Mar 2024 06:01:52 GMT.
 * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
 */

:root {
    --ck-color-image-caption-background: hsl(0, 0%, 97%);
    --ck-color-image-caption-text: hsl(0, 0%, 20%);
    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
    --ck-color-mention-text: hsl(341, 100%, 30%);
    --ck-color-selector-caption-background: hsl(0, 0%, 97%);
    --ck-color-selector-caption-text: hsl(0, 0%, 20%);
    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
    --ck-highlight-marker-green: hsl(120, 93%, 68%);
    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
    --ck-highlight-pen-green: hsl(112, 100%, 27%);
    --ck-highlight-pen-red: hsl(0, 85%, 49%);
    --ck-image-style-spacing: 1.5em;
    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
    --ck-todo-list-checkmark-size: 16px;
}

/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table .ck-table-resized {
    table-layout: fixed;
}
/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table table {
    overflow: hidden;
}
/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table td,
.ck-content .table th {
    overflow-wrap: break-word;
    position: relative;
}
...

這邊略作刪減，全部樣式見官方文件

我們可以將全部樣式複製儲存起來，並將該檔案引入到程式碼中，接著在渲染內容的外層加上 .ck-content，樣式就套用的到了。

參考資料

Predefined CKEditor 5 builds
Vue.js 3+ rich text editor component
Content styles