Javascript CKEditor5代码块的示例用法

我正在尝试将代码块插件添加到CKEditor浏览器版本（non-node.js版本），该文档仅提供基于npm的安装，如何在仅浏览器的CKEditor中实现这一点

---

CKEditor 5有一个在线生成器。您可以轻松地从中添加所需的功能

由于CKEditor完全是用javascript编写的，所以他们很容易在Node（NPM）中维护它

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

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

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

您可以在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;

网页包配置文件如下所示：

/**
 * @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中添加该功能，并使用以下命令构建Webpack文件“npx Webpack--config Webpack.config.js”

---

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

请提供更多详细信息……虽然此链接可能会回答问题，但最好在此处包含答案的基本部分，并提供链接以供参考。如果链接页面发生更改，则仅链接的答案可能无效-