---
title: CKEditor5 打包外掛教學
tags: 程式設計,筆記
description: 安裝教學
---

# CKEditor5 打包外掛教學
CKEditor5部分功能並未包裝在下載的ckeditor.js內，因此如果有客製化功能的需要，就必須自己進行包裝，這邊找到網路上有教學，在這邊整理一下。
> https://ithelp.ithome.com.tw/articles/10198816

## 安裝必要程式
安裝前先準備Node.js這個打包工具，網址如下：
:::success
[Node.js](https://nodejs.org/en/)
:::
## 安裝版本介紹
:::success
1. CKEditor5 build-classic(27.1.0)
2. 打包新增功能 螢光筆、文字對其方式、文字風格
:::

## 安裝前小故事
### 官方將ckeditor5-build-classic的Git 併入主線，造成小弟測試的很多次都無法客製化，為避免重蹈覆轍，小弟寫一篇教學


## Step By Step
### 1.首先先到官方GitHub下載原始碼 [網址](https://github.com/ckeditor/ckeditor5)。

1. 點Download Zip進行下載

2. 將下載來的資料解壓縮到自己喜歡的位置，我這邊是放在D槽。

3. 首先可以打開package.json進行確認內定的版本是否正確(27.1.0)

4. 接著開啟node.js的 command line進行打包作業

5. 先將目錄指定至打包用的目錄如下

6. 先將上述的路徑進行初始化
:::info
輸入 npm install
:::

7. 初始化後會在目錄下新增一個[node_modules]目錄，裡面全部是node會用到的套件

8. 經過初始化後就可以安裝自己需要外掛程式 [連結](https://ckeditor.com/docs/ckeditor5/latest/features/index.html)
9. [螢光筆Marking](https://ckeditor.com/docs/ckeditor5/latest/features/highlight.html)官方網址介紹，使用以下的指令進行安裝
:::success
npm install --save @ckeditor/ckeditor5-highlight
:::

10. 安裝完後跟目錄底下的package.json會多一個剛剛安裝的套件名字

11. 安裝玩套件後記得在src目錄下的ckeditor.js加入剛剛安裝的套件(這邊有點類似C#裡面的using引用)這邊我就引用官方網站的方法
:::success
1. 首先最上面先import進來

// The editor creator to use.
上面很多比省略....
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';<!--新增引用在這邊-->

2. 再來就是加入外掛程式在builtinPlugins

ClassicEditor.builtinPlugins = [
	上面很多省略.....
	TableToolbar,
	TextTransformation,
	Highlight   <!--最底下增加宣告加入Highlight外掛-->
];

3. 按照官網的介紹加入defaultConfig(基本設定)

ClassicEditor.defaultConfig = {
	<!--新增highlight toolbar樣式-->
    highlight: {
		options: [
			{
				model: 'greenMarker',
				class: 'marker-green',
				title: 'Green marker',
				color: 'rgb(25, 156, 25)',
				type: 'marker'
			},
			{
				model: 'yellowMarker',
				class: 'marker-yellow',
				title: 'Yellow marker',
				color: '#cac407',
				type: 'marker'
			},
			{
				model: 'redPen',
				class: 'pen-red',
				title: 'Red pen',
				color: 'hsl(343, 82%, 58%)',
				type: 'pen'
			}
		]
	},
	toolbar: {
		items: [
			'heading',
			'|',
			'bold',
			'italic',
			'link',
			'bulletedList',
			'numberedList',
			'highlight',   <!--新增toolbar所在位置-->
			'|',
			'outdent',
			'indent',
			'|',
			'uploadImage',
			'blockQuote',
			'insertTable',
			'mediaEmbed',
			'undo',
			'redo'
		]
	},
	image: {
		toolbar: [
			'imageStyle:full',
			'imageStyle:side',
			'|',
			'imageTextAlternative'
		]
	},
	table: {
		contentToolbar: [
			'tableColumn',
			'tableRow',
			'mergeTableCells'
		]
	},
	// This value must be kept in sync with the language defined in webpack.config.js.
	language: 'en'
};

:::

12. 新增完後就可以嘗試先打包看看 執行 "npm run build"進行打包
:::info
npm run build
:::
13. 打包後的檔案會放於build資料夾
14. 再來可以直接在sample裡面的檔案直接執行..可以看到已經有螢光筆的功能

======後續繼續寫=====2021/05/18