CKEditor 5 Framework to use basically

Posted on Edited on In Views: Disqus:

 

如果你要高度客制化 CKEditor 5，則得出動 CKEditor 5 Framework 來處理，

以下列出使用 CKEditor 5 Framework 的基本範例。

 

範例結構如下

 

針對 index.html、app.js、webpack.config.js 三個檔案內容為

 

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>CKEditor 5 Framework - Quick start</title>
</head>

<body>
    <div id="editor">
        <p>Editor content goes here.</p>
    </div>

    <script src="./bundle.js"></script>
</body>

</html>

 

app.js

import ClassicEditor 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';

ClassicEditor
    .create(document.querySelector('#editor'), {
        plugins: [Essentials, Paragraph, Bold, Italic],
        toolbar: ['bold', 'italic']
    })
    .then(editor => {
        console.log('Editor was initialized', editor);
    })
    .catch(error => {
        console.error(error.stack);
    });

 

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: './src/app.js',

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

    module: {
        rules: [
            {
                // Or /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/ if you want to limit this loader
                // to CKEditor 5 icons only.
                test: /\.svg$/,

                use: ['raw-loader']
            },
            {
                // Or /ckeditor5-[^/]+\/theme\/[^/]+\.css$/ if you want to limit this loader
                // to CKEditor 5 theme only.
                test: /\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            singleton: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: 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 }
};

 

以上檔案都準備好了之後再來開始安裝相關套件

webpack 相關套件：

$ npm install --save-dev webpack webpack-cli postcss-loader raw-loader style-loader

CKEditor 5 相關工具套件：

$ npm install --save-dev @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-basic-styles

CKEditor 5 相關佈景套件：

$ npm install --save-dev @ckeditor/ckeditor5-dev-utils @ckeditor/ckeditor5-theme-lark

 

執行 $ npx webpack 編譯後，會產生 bundle.js 檔，

之後再開啟 index.html 觀看成果