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

這篇ckeditor5安裝教學，已過期

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

---

這篇是一篇簡易的CKEditor5教學，CKEditor5 跟CKEditor4 有很大的別差，簡單點講就是每次想設定或更新toolbar 都需要經webpack 打包一次，對於完全沒有npm經驗的人入手有點難，本文只作簡單記錄

Install with git

git clone -b stable https://github.com/ckeditor/ckeditor5
cd ckeditor5/packages/ckeditor5-build-classic
npm install

Install with npm

npm install --save @ckeditor/ckeditor5-build-classic

前往 build 目錄 ckeditor.js 是基礎本的 ckeditor 文件
我們嘗了測試，直接在此目錄中建立一個index.html

內容為：

Classic editor

            <p>This is some sample content.</p>

    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );

以上是官方demo

幾點安裝／初始化小總結

1. <script src="./ckeditor.js"></script> 建議在html前引入，不會因為載入時長問題而發生頁面的跳動
2. textarea id 設為 editor 對應在 下面的Javascript create() 中也設定 #editor
3. 其他設定可前往 src/ckeditor.js 修改，然後運作 npm run build 有裝yarn的也可用 yarn run build。每次運作完都會自動更新及打包成 build/ckeditor.js

安裝插件

ckeditor5 將一些很常見的東西都會在原生版編輯器中通通抽走，比如很常見的「文字對齊」alignment 都需要自行安裝，這雖然變得更麻煩，但不是更乾淨了嗎？

npm install

install a plugins : alignment

npm install --save-dev @ckeditor/ckeditor5-alignment

修改 src/ckeditor.js

找到對應置位加入 共插入了3處

// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
//....some import 
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 Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';     // <--- ADDED

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    //... some code
    Paragraph,
    Alignment   // <--- ADDED
];

// Editor configuration.
ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            'alignment',   // <--- ADDED
            '|', 
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'uploadImage',
            'blockQuote',
            'undo',
            'redo'
        ]
    },
    image: {
        toolbar: [
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side',
            '|',
            'toggleImageCaption',
            'imageTextAlternative'
        ]
    },
    // This value must be kept in sync with the language defined in webpack.config.js.
    language: 'en'
};

官方Full-Demo code

安裝 alignment 並選擇加了在 heading 後面

下次有機會再跟大家介紹 Ckeditor5 圖片上傳