最近在選擇 HTML 編輯器，有想過 Markdown，不過怕一般使用者會被 Markdown 語法嚇到，所以最後還是決定使用老牌的 CKEditor。

CKEditor 目前有兩個版本 CKEditor 4 和 CKEditor 5，如果想從 4 換到 5 需要特別注意，因為 CKEditor 4 和 CKEditor 5 就像 AngularJS 和 Angular 一樣，後者為了因應未來的前端需求，是完全打掉重寫，不相容舊版的程式，API 和介面都是新的。

新版功能雖然比較少，還在持續開發中，但操作和介面我比較喜歡，有加入響應式的設計，不過有三點使用前需要重點評估。

1. 瀏覽器支援度較差，不支援 IE 瀏覽器
2. 套件功能較少，還在開發中
3. 無法編輯和檢視原始碼

目前官方可下載的版本有四種 Classic、Balloon、Inline、Document，都不包含完整功能，新版的 CKEditor 將功能都以模組化的形式實現，想要加入其他模組，需使用 npm、webpack 重新打包程式，不過小弟對 npm、webpack 等前端的技術不太熟悉，所以處處碰壁，因此才會有這篇碰壁文，阿...不對...是介紹文的誕生。

下載 CKEditor 5

首先到官網 下載 套件，我選基本的 Classic 版本。

接著在專案內引用 js。

<script src="ckeditor.js"></script>

加入編輯器初始化程式。

<form id="form1" runat="server">
    <div style="margin: 0 auto; width: 700px">
        <textarea id="editor"></textarea>
    </div>
</form>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(editor => {
            console.log(editor);
        })
</script>

執行後就可以看到編輯器。

客製化介面，重新打包程式

接下來開始客製化編輯器介面，需安裝:

• Node.js
• npm

到 GitHub 下載原始碼，網址。

如果有安裝 git 可以直接拉取。

https://github.com/ckeditor/ckeditor5-build-classic.git

開啟 Node.js command 將位置移動到資料夾路徑下。

cd D:\ckeditor5-build-classic

執行 npm install 安裝 package.json 內 devDependencies 指定的套件。

npm install

package.json

{
  "devDependencies": {
    "@ckeditor/ckeditor5-adapter-ckfinder": "^10.0.2",
    "@ckeditor/ckeditor5-autoformat": "^10.0.2",
    "@ckeditor/ckeditor5-basic-styles": "^10.0.2",
    "@ckeditor/ckeditor5-block-quote": "^10.0.2",
    "@ckeditor/ckeditor5-dev-utils": "^10.0.0",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^6.0.0",
    "@ckeditor/ckeditor5-easy-image": "^10.0.2",
    "@ckeditor/ckeditor5-editor-classic": "^11.0.0",
    "@ckeditor/ckeditor5-essentials": "^10.1.1",
    "@ckeditor/ckeditor5-heading": "^10.0.2",
    "@ckeditor/ckeditor5-image": "^10.2.0",
    "@ckeditor/ckeditor5-link": "^10.0.3",
    "@ckeditor/ckeditor5-list": "^11.0.1",
    "@ckeditor/ckeditor5-paragraph": "^10.0.2",
    "@ckeditor/ckeditor5-theme-lark": "^11.0.0",
    "@ckeditor/ckeditor5-upload": "^10.0.2",
    "postcss-loader": "^2.1.5",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.21.0",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "webpack": "^4.15.0",
    "webpack-cli": "^3.0.8"
  }
}

接下來看一下官方的套件說明，剛開始不會看，不知道如何安裝套件，這邊研究了好久，網址。

Highlight

先以 Highlight 彩色筆舉例，首先看到網頁下方 Installation 的部分，會有 npm 的安裝指令。

npm install --save @ckeditor/ckeditor5-highlight

安裝完成後，開啟 package.json 可以看到多了一個項目。

{
  "dependencies": {
    "@ckeditor/ckeditor5-highlight": "^10.0.2"
  }
}

回到網頁，指令下方就是打包套件會用到的設定。

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

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Highlight, ... ],
        toolbar: [ 'highlight', ... ]
    } )
    .then( ... )
    .catch( ... );

CKEditor 的打包會用到 Webpack，這裡不太熟悉卡關好久，首先開啟 webpack.config.js 找到 entry 入口點，發現入口點設定在 ckeditor.js 上。

entry: path.resolve( __dirname, 'src', 'ckeditor.js' ),

接著開啟 ckeditor.js，果然就是套件的設定檔，照官網的說明將設定加入 builtinPlugins，刪除 defaultConfig，這部分可以寫在 Javascript。

/**
 * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md.
 */

// The editor creator to use.
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 Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
//新加入的功能
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Link,
    List,
    Paragraph,
    //新加入的功能
    Highlight,
];

// Editor configuration.
ClassicEditor.defaultConfig = {
    // This value must be kept in sync with the language defined    in webpack.config.js.
    language: 'en'
};

接著加入其他常用的功能。

Text alignment

npm install --save @ckeditor/ckeditor5-alignment

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Alignment, ... ]
    } )
    .then( ... )
    .catch( ... );

Tables

npm install --save @ckeditor/ckeditor5-table

import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Table, TableToolbar, ... ]
    } )
    .then( ... )
    .catch( ... );

Basic text styles

npm install --save @ckeditor/ckeditor5-basic-styles

import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Underline, Strikethrough, Code, ... ]
    } )
    .then( ... )
    .catch( ... );

打包 CKEditor

完成設定後執行指令。

npm run build

打包完後在 build 資料夾應該可以看到 ckeditor.js，將其複製到網站下，替換原 js 檔。

編輯器介面設定

新增 ckeditor.config.js 將 toolbar 的設定寫在這裡。

var ckeditorConfig = {
    "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"
            }
        ]
    }, 
    "alignment": {
        "options": [
            "left", 
            "right"
        ]
    }, 
    "table": {
        "toolbar": [
            "tableColumn", 
            "tableRow", 
            "mergeTableCells"
        ]
    }, 
    "toolbar": [
        "heading", 
        "|", 
        "bold", 
        "italic", 
        "underline", 
        "strikethrough", 
        "|", 
        "bulletedList", 
        "numberedList", 
        "|", 
        "alignment", 
        "|", 
        "highlight", 
        "code", 
        "blockQuote", 
        "|", 
        "link", 
        "imageUpload", 
        "insertTable", 
        "|", 
        "undo", 
        "redo"
    ]
};

主程式引用 ckeditor.config.js，接著在 ClassicEditor.create 加上參數就完成了。

<script src="ckeditor.config.js"></script>

<form id="form1" runat="server">
    <div style="margin: 0 auto; width: 800px">
        <textarea id="editor"></textarea>
    </div>
</form>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'), ckeditorConfig)
        .then(editor => {
            console.log(editor);
        })
</script>

結果

圖片上傳功能

最後介紹圖片上傳功能，圖片上傳的流程如下:

1. 點選介面按鈕
2. 選擇圖片，可多選
3. CKEditor 會根據指定的網址上傳圖片 (多張圖，多個請求)
4. Server 端將圖片儲存並返回圖片網址
5. CKEditor 將圖片顯示在畫面上

首先在 ckeditor.config.js 內設定上傳網址。

var ckeditorConfig = {
    //...
    ckfinder: {
        uploadUrl: '/'
    },
    //...
}

接著需實作 Server 端程式，API 回傳的格式如下。

{
    uploaded: 1,   //是否上傳成功
    url: "/"       //圖片網址
}

結語

會寫這篇主要是研究打包的過程中碰到了不少困難，但網路可找到的相關資訊較少，因此完成後就想將過程分享給和我一樣不熟悉 npm、webpack 的人，今天就介紹到這裡，感謝大家觀看。

參考文章

CKEditor 5 documentation
CKEditor5基本使用
富文本编辑器CKEditor 5的使用