Vue3 CKEditor5 (1)：設置教學

4 個月前(已編輯)Vue

最近在 Vue3 的專案中導入了 CKEditor5，但在網路上翻閱了很多文章，發現都有點年代了，官網也看的霧煞煞，花了不少時間才成功運行起來，想記錄一下全過程，從環境建立一直到安裝套件和最後的設定

CKEditor 5

前言#

最近在 Vue3 的專案中導入了 CKEditor5，但在網路上翻閱了很多文章，發現都有點年代了，官網也看的霧煞煞，花了不少時間才成功運行起來，想記錄一下全過程，從環境建立一直到安裝套件和最後的設定。

環境建立#

這裡一樣使用 Vite 官網的指令快速建立環境

npm create vite@latest 

# 經過一連串設定後 ...

cd vue3-ckeditor5-demo
npm install
npm run dev

到了這裡，應該會看到以下的畫面

Imgur

到這裡就大功告成啦 ( 喂喂喂

套件說明#

CKEditor5 是一個非常優秀的套件，官網提供的版型高達 6 種

  1. Classic editor
  2. Inline editor
  3. Balloon editor
  4. Balloon block editor
  5. Document editor
  6. Multi-root editor

下面的使用都會以基本板型為範例(基本上很夠用)。

而且能夠讓使用者自由設定的部分非常多，例如：語言、工具列、圖片上傳工具等等，有興趣的朋友可以花時間到官方文檔瀏覽。

套件安裝#

接下來要安裝這次會使用到的核心套件

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

這裡可以參考官網的說明

接著到 main.js 進行全域註冊

main.js
import { createApp } from 'vue';
import './style.css';
import CKEditor from '@ckeditor/ckeditor5-vue';
import App from './App.vue';

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

當然也可以選擇本地註冊的方式

<script setup>
import { component as ckeditor } from '@ckeditor/ckeditor5-vue';
</script>

<template>
	<ckeditor />
</template>

要注意的是，我們要使用的是 ckeditor5-vue 中解構出來的 component

處理完註冊的問題後，接著在 Components 中新增 Ckeditor.vue 元件

Ckeditor.vue
<script setup>
import { component as ckeditor } from '@ckeditor/ckeditor5-vue';
</script>

<template>
  <div id="ckeditor">
    <!-- 如果是全域註冊的話也是小寫 -->
    <ckeditor />
  </div>
</template>

把剛新增好的元件，import 到 App.vue 裡

App.vue
<script setup>
import Ckeditor from './components/Ckeditor.vue';
</script>

<template>
  <Ckeditor />
</template>

接下來就可以開始設定了！

套件設定#

首先 import 這兩個檔案進來

Ckeditor.vue
// 中文包
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';

// 經典版型
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

接著設定三個參數及一個 props

Ckeditor.vue
import { ref } from 'vue';

// 控制 ckeditor 的啟用
defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
});

// 存放版型，用來傳入
const editor = ClassicEditor;

// 存放 Editor 的結果
const editorResult = ref('');

// 存放 Editor 的設定 (Ex: 工具列)
const editorConfig = {};

然後綁定到 <ckeditor> 上

Ckeditor.vue
<template>
  <div id="ckeditor">
    <!-- 套件放置處 -->
    <ckeditor
      :editor="editor"
      :config="editorConfig"
      :disabled="disabled"
      v-model="editorResult"
    />
  </div>
</template>

接下來我們對 editorConfig 新增一些設定

Ckeditor.vue
const editorConfig = {
  // 語言 中文
  language: 'zh-cn',

  // 工具列
  toolbar: {
    items: [
      'heading',
      '|',
      'bold',
      'italic',
      'link',
      'bulletedList',
      'numberedList',
      '|',
      'outdent',
      'indent',
      '|',
      'imageUpload',
      'blockQuote',
      'insertTable',
      'mediaEmbed',
      'undo',
      'redo'
    ]
  }
};

為了讓他好看一點，我們來新增一些樣式

Ckeditor.vue
<style scoped>
#ckeditor :deep(.ck-editor__editable)  {
  min-height: 100px;
  max-height: 500px;
  color: #1A202C;
}
</style>

由於環境建立的初始文字顏色是白色，所以記得要去更改，不要像我一樣打半天以為掛掉了，沒顯示文字...

沒意外的話，應該能看到畫面上出現酷酷的編輯器了

Imgur

接下來我們來新增一些 Emit 事件

Ckeditor.vue
const emit = defineEmits(['ready', 'foucs', 'blur', 'input', 'destroy']);

// 準備
const onEditorReady = () => {
  emit('ready');
};

// 聚焦
const onEditorFoucs = () => {
  emit('foucs');
};

// 失去焦點
const onEditorBlur = () => {
  emit('blur');
  console.log(editorResult.value);
};

// 打字中
const onEditorInput = () => {
  emit('input');
};

// 銷毀時
const onEditorDestroy = () => {
  emit('destroy');
};

通通給他綁上去

Ckeditor.vue
    <ckeditor
      :editor="editor"
      :config="editorConfig"
      :disabled="disabled"
      @ready="onEditorReady"
      @foucs="onEditorFoucs"
      @blur="onEditorBlur"
      @input="onEditorInput"
      @destroy="onEditorDestroy"
      v-model="editorResult"
    />

這樣就大功告成啦～灑花

Imgur

結尾#

其實設定上並沒有太大的難度，如果不需要處理圖片和複雜的工具的話，唯一的困難點可能就是 Vue3 的版本實在是太新了，所以並沒有太多的資源可以參考。

下面我會放下 Demo 的專案，遇到問題的話可以來參考看看。

相關連結#

參考文獻#