###### tags: `Web` `BackEnd` `Vue` `Nuxt` `Editor`

# Nuxt安裝CKEdit使用Plug紀錄

## 初步安裝

Vue使用安裝Ckeditor一般會安裝兩個套件

- 1. Ckeditor5-Vue2
- 2. [Ckeditor5-build 系列](https://ckeditor.com/ckeditor-5/online-builder/)
- [ckeditor5-build-classic](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic)
- [ckeditor5-build-inline](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-inline)
- [ckeditor5-build-decoupled-document](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-decoupled-document)
- [ckeditor5-build-balloon](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-balloon)
- [ckeditor5-build-balloon-block](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-balloon-block)

目前我們選用ckeditor5-build-classic來測試，指令如下

npm install --save @ckeditor/ckeditor5-vue2

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

## 掛載

1. 建立shim-ckeditor.d 宣告declar module '@ckeditor/ckeditor5-vue2' 讓ts可識別

- shim-ckeditor.d.ts

declare module '@ckeditor/ckeditor5-vue2';

2. 建立Plug，將ckeditor5-vue2宣告成全域使用

- ckeditor.client.ts

import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue2';

Vue.component('Ckeditor', CKEditor.component);

3. 建立Vue Component

- VCKEditor.vue

<template>
  <client-only>
    <ckeditor
      v-model="editorData"
      :editor="editor"
      :config="editorConfig"
    ></ckeditor>
  </client-only>
</template>

<script lang="ts">
import { Component, VModel, Vue } from 'nuxt-property-decorator';

let classicEditor: any;
if (process.browser) {
  classicEditor = require('@ckeditor/ckeditor5-build-classic');
}

@Component
export default class extends Vue {
  @VModel()
  private editorData!: string;
  private editor = classicEditor;
  private editorConfig = {
      // 樣式設定
  };

}

</script>

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

**註:if(process.browser)避免發生window is not defined的錯誤 (讓 Nuxt 在打包的時候，不要將 ckeditor5-build-classic 打包進去 server)**

## 使用

<template>
  <div>
    <v-row>
      <v-col cols="12">
        <v-ckeditor
          v-model="content"
        ></v-ckeditor>
      </v-col>
      <v-col cols="12">
        <v-btn class="primary" @click="onSave">儲存</v-btn>
      </v-col>
    </v-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';
import VCKEditor from '@/components/VCKEditor.vue';

@Component({
  components: { 'v-ckeditor': VCKEditor },
})
export default class extends Vue {
  // document.title
  public head() {
    return {
      title: 'CKEditor Test',
    };
  }

  private content = "This is the content !!";

  private onSave() {
    alert(this.content);
  }
}
</script>

結果



## 使用Plug客製化

一般使用CKEditor會有下面三種方式去決定樣式與插建功能

1. 用build系列(classic,inline,decoupled-document,balloon,balloon-block)
2. 用暴力下載套件改原始碼
3. 用原始碼引入Plugin方式

第一種方式是使用別人寫好且Build好的套件，無法再自行增加Plug安插在editorConfig裡做設定。只能根據套件有開放的功能去使用，因此在客製化上會有較多的限制。

因此如果要使用Plug插件，通常會使用第二與第三種方法。第二種方法直接下載原套件自行修改套件內容重新做編譯使用，第三種則是自己引用套件的方式下去處理。

這邊稍微示範該如何使用第二種方法，去客製化插件

### 手動引入套件

#### [Step1.下載Build套件](https://ckeditor.com/ckeditor-5/download/?null-addons=)

至Ckeditor5官網download下載Classic Package

載點:https://ckeditor.com/ckeditor-5/download/?null-addons=

這邊注意!!!!! 下載的套件版本要與CKEditor Github版本相同


#### Step2 下載套件後載入專案

將ckeditor5-build-classic-29.2.0下的ckeditor5-build-classic放到專案下(可以自行新增package資料夾)


#### Step3 修改引用路徑

修改Classic editor引用路徑(VCKEditor.vue)

if (process.browser) {
  classicEditor = require('~/package/ckeditor5-build-classic/ckeditor');
}

編譯過後跑起來看到編譯器頁面就成功了


### 新增Plug (Highlight)

#### [Step1.下載Ckeditor5 Github](https://github.com/ckeditor/ckeditor5)

至Github Clone Ckeditor5，接著用VS Code打開ckeditor5\packages\ckeditor5-build-classic路徑

#### [Step2.至官網閱讀如何安裝Plug套件](https://ckeditor.com/docs/ckeditor5/latest/features/highlight.html)

##### 下載套件

npm install --save @ckeditor/ckeditor5-highlight

##### Import套件

import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';

##### 在builtinPlugins新增套件

ClassicEditor.builtinPlugins = [
	Essentials,
	UploadAdapter,
	Autoformat,
	Bold,
	Italic,
	BlockQuote,
	CKFinder,
	CloudServices,
	EasyImage,
	Heading,
	Image,
	ImageCaption,
	ImageStyle,
	ImageToolbar,
	ImageUpload,
	Indent,
	Link,
	List,
	MediaEmbed,
	Paragraph,
	PasteFromOffice,
	Table,
	TableToolbar,
	TextTransformation,
	ImageReaize,
	 // 將套件加入建構工具列
	 Highlight,
];

##### 在defaultConfig新增Highlight套件設定

	 highlight: {
		options: [
		  {
			model: 'yellowMarker',
			class: 'marker-yellow',
			title: 'Yellow Marker',
			color: 'var(--ck-highlight-marker-yellow)',
			type: 'marker'
		  },
		  {
			model: 'greenMarker',
			class: 'marker-green',
			title: 'Green marker',
			color: 'var(--ck-highlight-marker-green)',
			type: 'marker'
		  },
		  {
			model: 'pinkMarker',
			class: 'marker-pink',
			title: 'Pink marker',
			color: 'var(--ck-highlight-marker-pink)',
			type: 'marker'
		  },
		  {
			model: 'blueMarker',
			class: 'marker-blue',
			title: 'Blue marker',
			color: 'var(--ck-highlight-marker-blue)',
			type: 'marker'
		  },
		  {
			model: 'redPen',
			class: 'pen-red',
			title: 'Red pen',
			color: 'var(--ck-highlight-pen-red)',
			type: 'pen'
		  },
		  {
			model: 'greenPen',
			class: 'pen-green',
			title: 'Green pen',
			color: 'var(--ck-highlight-pen-green)',
			type: 'pen'
		  }
		]
	  },

##### 在defaultConfig toolbar新增介面items

toolbar: {
	items: [
		'heading',
		'|',
		'bold',
		'italic',
		'link',
		'bulletedList',
		'numberedList',
		'|',
		'outdent',
		'indent',
		'|',
		'uploadImage',
		'blockQuote',
		'insertTable',
		'mediaEmbed',
		'undo',
		'redo',
		 // 將套件放在想要的位置
		 'Highlight'
	]
},

##### 編譯

npm run build

##### 將build資料夾的ckeditor.js複製到自己專案下


##### 結果