[CKEditor 5] 套件打包方式

最近在选择 HTML 编辑器，有想过 Markdown，不过怕一般使用者会被 Markdown 语法吓到，所以最后还是决定使用老牌的 CKEditor。

CKEditor 目前有两个版本 CKEditor 4 和 CKEditor 5，如果想从 4 换到 5 需要特别注意，因为 CKEditor 4 和 CKEditor 5 就像 AngularJS 和 Angular 一样，后者为了因应未来的前端需求，是完全打掉重写，不相容旧版的程式，API 和介面都是新的。

新版功能虽然比较少，还在持续开发中，但操作和介面我比较喜欢，有加入响应式的设计，不过有三点使用前需要重点评估。

浏览器支援度较差，不支援 IE 浏览器套件功能较少，还在开发中无法编辑和检视原始码

目前官方可下载的版本有四种 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.jsnpm

到 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>

结果

图片上传功能

最后介绍图片上传功能，图片上传的流程如下:

点选介面按钮选择图片，可多选CKEditor 会根据指定的网址上传图片 (多张图，多个请求)Server 端将图片储存并返回图片网址CKEditor 将图片显示在画面上

首先在 ckeditor.config.js 内设定上传网址。

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

接着需实作 Server 端程式，API 回传的格式如下。

{    uploaded: 1,   //是否上传成功    url: "/"       //图片网址}

结语

会写这篇主要是研究打包的过程中碰到了不少困难，但网路可找到的相关资讯较少，因此完成后就想将过程分享给和我一样不熟悉 npm、webpack 的人，今天就介绍到这里，感谢大家观看。

参考文章

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