CKEditor 5 教學(二),客製化編輯器的功能列

sharkHead 程式技術 8個月前 • 0

在上一篇文章中,我們簡單介紹了一下 CKEditor 如何安裝
CKEditor 雖然功能非常多,但預設的功能非常少,需要我們再進行額外的設定
在這篇文章中,會講述如何客製化一個屬於自已的 WYSIWYG 編輯器

此篇文章主要講述兩個部分

  1. 編輯區塊上下高度太窄?
  2. 新增功能,讓縮排與凸排活過來

 

編輯區塊上下高度太窄?


一開始完成安裝的 CKEditor,編輯區塊上下高度並不高

image.png
一開始的高度給人一種很小氣的感覺

這時候可以創建一個 css 檔案 editor.css,然後在編輯器的頁面中引入

<link href="你的路徑/editor.css" rel="stylesheet">

在這個 editor.css中,簡單的加上一段 CSS 代碼

/* CKEditor 編輯區塊 */
.ck-editor__editable_inline {
	/* 設定最低高度 */
    min-height: 500px;
}

這時重新整理頁面你就可以看到編輯器的高度順利的變高拉

%E6%88%AA%E5%9C%96%202020-08-09%20%E4%B8%8B%E5%8D%888_17_35.png
看起來比較有 “文章” 編輯器的感覺了

 

新增功能,讓縮排與凸排活過來


一開始雖然可以看到功能列上有縮排與凸排,但是兩個是呈現灰色無法點擊的狀態
即使你在編輯區塊中打上字,仍然無法使用凸排與縮排的功能

接下來,我們要來幫 CKEditor 新增套件,讓縮排與凸排可以正常使用
首先讓我們先到 ckeditor5/package/ckeditor5-build-classic 資料夾底下

image%282%29.png
底下有這些檔案

在這裡,我們先用 npm 安裝縮排與凸排的套件

npm install @ckeditor/ckeditor5-indent

然後進到 src 資料夾底下,可以看到一個檔案 ckeditor.js
這個檔案就是讓你可以對編輯器進行新增功能與客製化的地方,大致可以分成 3 個區塊

最上面第一個區塊,是引入 npm 套件的地方
我們在最下面引入剛剛用 npm 安裝好的縮排與凸排的套件

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
.
.
.
// 下方為新增的套件
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';

中間的區塊,是使用 npm 去 build 時,會載入的套件
此段程式碼的最下面,我們一樣補上剛剛 import 的 IndentBlock

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
	Essentials,
	UploadAdapter,
	Autoformat,
	Bold,
	Italic,
	BlockQuote,
.
.
.
	// 下方為新增的套件
	IndentBlock,
];

最下面的區塊,就是可以新增功能與客製化編輯器的地方啦
由於預設就有 indent(縮排)與 outdent(凸排),因此這裡可以不用調整

// Editor configuration.
ClassicEditor.defaultConfig = {
	// 編輯器上方功能列的顯示與排列
	toolbar: {
		items: [
			'heading',
			'|',
			'bold',
			'italic',
			'link',
			'bulletedList',
			'numberedList',
			'|',
			'indent',
			'outdent',
			'|',
			'imageUpload',
			'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'
};

一切都妥當之後,回到 ckeditor5/package/ckeditor5-build-classic 資料夾底下
使用 npm 的 build 指令,重新產出一個 CKEditor 的 JS file

npm run build

等 build 結束之後,如上一篇文章所述,將 build 資料夾複製到你的網站專案中

這邊要注意一點
套件(Plugin)的版本號必須與 ckeditor 5 的版本相同
如果安裝的套件發現顯示的版本比 ckeditor 5 還要新時
建議重新 git clone 最新版本的 ckeditor 5,並重新安裝套件,設定 ckeditor.js 與 build 一個新版本
否則會有機會遇到 duplicated modules(模組重複載入)的問題

重新整理網頁之後,編輯器上的縮排與凸排就可以正常使用拉

%E6%88%AA%E5%9C%96%202020-08-11%20%E4%B8%8B%E5%8D%889_19_59.png
縮排與凸排不再是灰色狀態了

如果發現網頁重新整理之後,編輯器沒有變化,是因為網頁快取(Cache)的關係
一般瀏覽器為了讓網頁載入的速度更快,會自動幫網頁需要載入的 JS 與 CSS 檔案建立快取
避免每次開啟網頁都要重新載入這些檔案
這時候可以使用快捷鍵 Ctrl + F5,使瀏覽器在重新整理的時候,重新載入 JS 與 CSS


sharkHead

PHP 與 Python 菜雞工程師
最近在努力學習 TypeScript,希望可以突破慧根的限制