CKEditor 生态系统文档
Search
首页/云服务/示例

guide在 Node.js 中创建编辑器捆绑包

本文介绍了 Node.js 中 CKEditor 5 编辑器捆绑包 的示例。CKEditor 云服务需要编辑器捆绑包来启用 文档存储、导入和导出 以及 连接优化 功能。

本文提供了现成的示例。如果您需要分步指南或需要调整现有 CKEditor 5 设置以创建捆绑包，请参考 高级编辑器捆绑 文章。

# 示例捆绑包

以下示例介绍了一种最小的编辑器捆绑包设置。它基于 3 个文件 - package.json、ckeditorcs.js 和 webpack.config.js，可以立即使用。

# 依赖项

本示例使用以下依赖项

  • ckeditor5
  • ckeditor5-premium-features
  • webpack
  • webpack-cli
  • mini-css-extract-plugin

有了上述内容，package.json 文件应如下所示。

{
    "name": "ckeditorcs-bundle",
    "version": "1.0.0",
    "private": true,
    "dependencies": {
        "ckeditor5": "^42.0.0",
        "ckeditor5-premium-features": "^42.0.0"
    },
    "devDependencies": {
        "webpack": "^5.91.0",
        "webpack-cli": "^4.10.0",
        "mini-css-extract-plugin": "^2.9.0"
    }
}

# 编辑器构建配置

ckeditorcs.js 文件展示了编辑器构建配置的示例。它被捆绑器用作入口文件。

请记住，根据您的需要调整以下配置，因为此示例已简化为最少。请参考 CKEditor 5 的 配置功能 文档，将编辑器调整为您需要的配置。

import {
    // The editor base creator to use.
    ClassicEditor,
    // All plugins that you would like to use in your editor.
    Essentials,
    Paragraph,
    Bold,
    Italic
} from 'ckeditor5';

import {
    // All premium plugins that you would like to use in your editor.
    RealTimeCollaborativeEditing
} from 'ckeditor5-premium-features';

class CKEditorCS extends ClassicEditor {}

// Load all plugins you would like to use in your editor this way.
// This is the only way to load plugins into the editor which will then be used in CKEditor Cloud Services.
CKEditorCS.builtinPlugins = [
    Essentials,
    Paragraph,
    Bold,
    Italic,
    RealTimeCollaborativeEditing
];

// Export your editor.
export default CKEditorCS;

# 捆绑器配置

webpack.config.js 文件展示了捆绑器配置的示例。这里使用 webpack 作为捆绑器。

const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

module.exports = {
    entry: './ckeditorcs.js', // Your editor build configuration.
    output: {
        filename: 'editor.bundle.js', // Content of this file is required to upload to CKEditor Cloud Services.
        library: 'CKEditorCS', // It is required to expose you editor class under the "CKEditorCS" name!

        libraryTarget: 'umd',
        libraryExport: 'default',
        clean: true
    },
    plugins: [
        new MiniCssExtractPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    performance: { hints: false }
};

# 生成捆绑包

在包含这些文件的文件夹中运行以下命令

npm install
npx webpack --mode production

此命令将生成 ./dist/editor.bundle.js 文件。此文件是捆绑包文件，应将其 上传到 CKEditor 云服务服务器。

# 示例捆绑包（旧版配置）

本节与从 旧版配置 捆绑编辑器有关。旧版配置是指使用编辑器预设、DLL 或 @ckeditor/ckeditor5-* 导入的配置。

请参考上面的 示例捆绑包 部分，了解最新的示例。

以下示例介绍了一种最小的编辑器捆绑包设置。它基于 3 个文件 - package.json、ckeditorcs.js 和 webpack.config.js，可以立即使用。

# 依赖项

本示例使用以下依赖项

  • @ckeditor/ckeditor5-editor-classic
  • @ckeditor/ckeditor5-basic-styles
  • @ckeditor/ckeditor5-essentials
  • @ckeditor/ckeditor5-paragraph
  • @ckeditor/ckeditor5-real-time-collaboration
  • @ckeditor/ckeditor5-dev-utils
  • @ckeditor/ckeditor5-theme-lark
  • css-loader
  • postcss-loader
  • raw-loader
  • style-loader
  • webpack
  • webpack-cli

有了上述内容，package.json 文件应如下所示

软件包及其版本的列表会因编辑器预设/构建和创建的时间而异。

{
    "name": "ckeditorcs-bundle",
    "version": "1.0.0",
    "private": true,
    "dependencies": {
        "@ckeditor/ckeditor5-editor-classic": "41.4.2",
        "@ckeditor/ckeditor5-basic-styles": "41.4.2",
        "@ckeditor/ckeditor5-essentials": "41.4.2",
        "@ckeditor/ckeditor5-paragraph": "41.4.2",
        "@ckeditor/ckeditor5-real-time-collaboration": "41.4.2"
    },
    "devDependencies": {
        "@ckeditor/ckeditor5-dev-utils": "^40.2.2",
        "@ckeditor/ckeditor5-theme-lark": "41.4.2",
        "css-loader": "^5.2.7",
        "postcss-loader": "^4.3.0",
        "raw-loader": "^4.0.2",
        "style-loader": "^2.0.0",
        "webpack": "^5.91.0",
        "webpack-cli": "^4.10.0"
    }
}

# 编辑器构建配置

ckeditorcs.js 文件展示了编辑器构建配置的示例。它被捆绑器用作入口文件。

请记住，根据您的需要调整以下配置，因为示例已简化为最少。请参考 CKEditor 5 入门 指南。

// The editor base creator to use.
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

// All plugins that you would like to use in your editor.
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';
import RealTimeCollaborativeEditing from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativeediting';

class CKEditorCS extends ClassicEditor {}

// Load all plugins you would like to use in your editor this way.
// This is the only way to load plugins into the editor which will then be used in CKEditor Cloud Services.
CKEditorCS.builtinPlugins = [
    Essentials,
    Paragraph,
    Bold,
    Italic,
    RealTimeCollaborativeEditing
];

// Export your editor.
export default CKEditorCS;

# 捆绑器配置

webpack.config.js 文件展示了捆绑器配置的示例。这里使用 webpack 作为捆绑器。

const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    entry: './ckeditorcs.js', // Your editor build configuration.
    output: {
        filename: 'editor.bundle.js', // Content of this file is required to upload to CKEditor Cloud Services.
        library: 'CKEditorCS', // It is required to expose you editor class under the "CKEditorCS" name!

        libraryTarget: 'umd',
        libraryExport: 'default'
    },
    module: {
        rules: [
            {
                test: /\.svg$/,
                use: [ 'raw-loader' ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag'
                        }
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },
    performance: { hints: false }
};

# 生成捆绑包

在 CKEditor 5 软件包文件夹中运行以下命令

npm install
npx webpack --mode production

此命令将生成 ./dist/editor.bundle.js 文件。此文件是捆绑包文件，应将其 上传到 CKEditor 云服务服务器。