CKEditor5 CodeBlock 的使用示例

Question

我正在嘗試將 CodeBlock 插件添加到 CKEditor 瀏覽器版本（非 node.js 版本）中，該文檔僅提供基於 npm 的安裝，我如何在僅瀏覽器的 CKEditor 中實現這一點

https://ckeditor.com/docs/ckeditor5/latest/features/code-blocks.html

Answer 1

CKEditor 5 有一個在線構建器。 您可以從此鏈接輕松添加所需的功能

由於 CKEditor 完全是用 javascript 編寫的，因此他們很容易在 Node(NPM) 中維護它。

構建 CKEditor 插件所需要做的就是選擇您需要的功能並通過npm install安裝這些功能，然后使用Webpack手動構建它。

對於這件事，CKEditor 有一個在線構建器，您可以在其中輕松選擇所需的編輯器類型和功能，然后按自定義構建。

您可以輕松下載自定義構建和結構，如下圖所示。

您可以在 build 文件夾中找到 ckeditor.js 文件，這是您在問題中實際詢問的內容。

您可以在 Src 文件夾中輕松找到 CKEditor.js，其中包含所有已安裝的插件配置。

/**
 * @license Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code.js';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock.js';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
import Table from '@ckeditor/ckeditor5-table/src/table.js';

class Editor extends ClassicEditor {}

// Plugins to include in the build.
Editor.builtinPlugins = [
    Autoformat,
    BlockQuote,
    Code,
    CodeBlock,
    Essentials,
    Paragraph,
    Table
];

export default Editor;

Webpack 配置文件如下：

/**
 * @license Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

'use strict';

/* eslint-env node */

const path = require( 'path' );
const webpack = require( 'webpack' );
const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const TerserWebpackPlugin = require( 'terser-webpack-plugin' );

module.exports = {
    devtool: 'source-map',
    performance: { hints: false },

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

    output: {
        // The name under which the editor will be exported.
        library: 'ClassicEditor',

        path: path.resolve( __dirname, 'build' ),
        filename: 'ckeditor.js',
        libraryTarget: 'umd',
        libraryExport: 'default'
    },

    optimization: {
        minimizer: [
            new TerserWebpackPlugin( {
                sourceMap: true,
                terserOptions: {
                    output: {
                        // Preserve CKEditor 5 license comments.
                        comments: /^!/
                    }
                },
                extractComments: false
            } )
        ]
    },

    plugins: [
        new CKEditorWebpackPlugin( {
            // UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
            // When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
            language: 'en',
            additionalLanguages: 'all'
        } ),
        new webpack.BannerPlugin( {
            banner: bundler.getLicenseBanner(),
            raw: true
        } )
    ],

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

假設如果你想添加一個額外的功能，你可以簡單地在線構建它，或者安裝在 npm 中並在 src 文件中的 CKEditor.js 中添加該功能，並使用此命令“npx webpack --config webpack.config.js”構建 Webpack 文件。 js”

但在運行此命令之前，您需要安裝 webpack 和所有必需的 npm 節點模塊。