javascript - CKEditor5 CodeBlock 的使用示例

Question

我正在尝试将 CodeBlock 插件添加到 CKEditor 浏览器版本(非 node.js 版本)中，该文档仅提供基于 npm 的安装，我如何在仅限浏览器的 CKEditor 中实现此目的

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

Answer 1

CKEditor 5 有一个在线构建器。您可以从此 link 轻松添加所需的功能

由于 CKEditor 完全用 javascript 编写，因此他们很容易在 Node(NPM) 中维护它。

构建 CKEditor 插件所需要做的就是选择所需的功能并通过 npm install 安装这些功能，然后使用 Webpack 手动构建它。

为此，CKEditor 有一个在线构建器，您可以在其中轻松选择所需的编辑器类型和功能，然后按自定义构建。

您可以轻松下载自定义构建，结构如下图所示。

您可以在构建文件夹中找到 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 中安装并在 CKEditor.js 中的 src 文件中添加该功能，然后使用此命令构建 Webpack 文件 "npx webpack - -config webpack.config.js”

但在运行此命令之前，您需要安装 webpack 和所有必需的 npm 节点模块。