[CKEditor5教學] 基本安裝 + 插件安裝教學 [2022版]

CKEDITOR 5，又來了！之前有一篇文章是介紹 ckeditor5教學-基本安裝-插件安裝教學

前言

有新的project要用上，需要少少特殊的插件，我又回來這邊看自己的舊文章想一步步去build自己的ckeditor，但發現有很多問題，因為當然編寫那篇文章ckeditor5 是v23 現在已到了v35了，官方的安裝指南也有更簡潔的版本

後來也看到ckeditor5 已經有了online builder，與以前ck4的玩法是一樣，對editor要求不高的朋友可去試試: CKEditor 5 Online Builder

而這邊文章當然就是教你自己一步步build 你的ckeditor出來

下面以最常用的Classic editor來做例子

注：npm 是需要用到的

1. 基本安裝

建立你的ckeditor目錄，比如名為ck5

請用 terminal進入

cd ck5

安裝基本依賴

npm install --save \
    css-loader@5 \
    postcss-loader@4 \
    raw-loader@4 \
    style-loader@2 \
    webpack@5 \
    webpack-cli@4

建立一個文件名為webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        library: 'ClassicEditor',
        libraryExport: 'default',
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};

安裝核心文件及demo用到的功能

npm install --save \
    @ckeditor/ckeditor5-dev-utils \
    @ckeditor/ckeditor5-editor-classic \
    @ckeditor/ckeditor5-essentials \
    @ckeditor/ckeditor5-paragraph \
    @ckeditor/ckeditor5-basic-styles \
    @ckeditor/ckeditor5-theme-lark

建立一個名為 app.js 文件

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
  Essentials, Paragraph, Bold, Italic
]

ClassicEditor.defaultConfig = {
  toolbar: {
      items: [ 'bold', 'italic']
  },
  language: 'zh'
};

編輯 package.json 文件

在最後面的 } 前加入

                ,
   "scripts": {
      "build": "webpack --mode development"
   }

此時你的文件應該大約是

{
  "dependencies": {
    "@ckeditor/ckeditor5-basic-styles": "^35.0.1",
    "@ckeditor/ckeditor5-dev-utils": "^30.4.0",
    "@ckeditor/ckeditor5-editor-classic": "^35.0.1",
    "@ckeditor/ckeditor5-essentials": "^35.0.1",
    "@ckeditor/ckeditor5-image": "^35.0.1",
    "@ckeditor/ckeditor5-paragraph": "^35.0.1",
    "@ckeditor/ckeditor5-theme-lark": "^35.0.1",
    "css-loader": "^5.2.7",
    "postcss-loader": "^4.3.0",
    "raw-loader": "^4.0.2",
    "style-loader": "^2.0.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
   "scripts": {
      "build": "webpack --mode development"
   }
}

執行

npm run build

如果你有yarn 也可用 yarn build

你的ckeditor已建立了去 dist/bundle.js

2. 測試

建立一個 index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CKEditor 5 Quick start guide</title>
    </head>
    <body>
        <div id="editor">
            <p>The editor content goes here.</p>
        </div>
        <script src="dist/bundle.js"></script>
        <script>
            ClassicEditor.create( document.querySelector( '#editor' ))
            .then( editor => {
              window.editor = editor;
            } )
            .catch( error => {
              console.error( 'There was a problem initializing the editor.', error );
            } );
        </script>
    </body>
</html>

直接使用瀏覽器打開這個文件即可，因為只是一個單純HTML再入了你的ckeditor文件

安裝插件／功能

ckeditor5 的所有功能都變成插件化（模組化?）

我們嘗試加入最基本的「Text alignment 」功能，即文字對齊功能

npm install --save @ckeditor/ckeditor5-alignment

回到app.js
加入

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

        plugins: [ Alignment, ... ],  //加入Alignment
        toolbar: [ 'alignment', ... ]  //加入 alignment

此時你的app.js應該是這樣的

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

ClassicEditor.builtinPlugins = [
  Essentials, Paragraph, Bold, Italic,Alignment
]

ClassicEditor.defaultConfig = {
  toolbar: {
      items: [ 'bold', 'italic','alignment']
  },
  language: 'zh'
};

再執行一次 npm run build

打開你的html文件瀏覽你會看到

後記

如果你按照官方的安裝指引，將會更簡短，因為官方是教你在app.js 中執行ClassicEditor.create ，這樣當然對一般人沒有問題，但如果你在較複雜的情況下，還想要重新設定一些比如遠程上傳等等的網址，或者每一頁都在指定數值要放在editor的話，則我這個個方法才能解決，不單單是ClassicEditor.create搬到html，因為要在html中運作，還去修改了webpack.config.js 可謂一波三.....四五六七折了....

解決這個問題太心累了，我無力向大家說明我上面做的跟官方有什麼不同，有興趣的大家可自己看看官方的跟我的差別

install ref: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start-other.html#building-the-editor-from-source

alignment ref: https://ckeditor.com/docs/ckeditor5/latest/features/text-alignment.html#installation