CKEditor 生态系统文档
Search
Contribute to this guide
首页/CKEditor 5/更新

guide从旧版在线构建器迁移

从旧版在线构建器可以迁移到三种安装方法。最佳选择取决于您是否只需要一个开箱即用的浏览器版本，或者是否需要一个定制和优化的版本。

npm 包是安装 CKEditor 5 最灵活和强大的方式。它允许您创建仅包含所需功能的编辑器自定义版本，从而显着减小最终版本的大小。但是，您需要一个 JavaScript 打包器或元框架来创建这样的版本。

如果您不希望进行构建过程，可以使用我们的 CDN 版本或下载 ZIP 压缩包。两者都包含编辑器和所有插件，因此您可以使用 CKEditor 5 的所有功能，而无需设置构建过程。

# CDN 版本

CDN 版本是快速将 CKEditor 5 添加到您的网站而无需安装任何依赖项或设置构建过程的理想选择。我们建议您使用我们新的交互式 构建器 来根据您的需求定制版本。然后，在构建器的“安装”部分，您可以选择“云 (CDN)”选项，了解如何将编辑器添加到您的网站。

# ZIP 压缩包

如果您不想进行构建过程或使用我们的 CDN 版本，可以下载包含编辑器版本的 ZIP 压缩包。我们建议您使用我们新的交互式 构建器 来根据您的需求定制版本。然后，在构建器的“安装”部分，您可以选择“自托管 (ZIP)”选项，了解如何将编辑器添加到您的网站。

# npm 包

如果您决定使用 npm 包，可以使用我们新的交互式 构建器 创建一个新版本，也可以从旧版在线构建器更新您的现有项目。我们建议使用新的交互式构建器，但如果您想保留现有的版本，可以按照以下步骤操作。

  1. 按照 从自定义版本迁移 指南中的步骤操作。

  2. 完成后，删除旧的 build 文件夹，并运行以下命令创建 CKEditor 5 的新版本。

npm run build

  1. 新 build 文件夹中应该有三个文件

    • ckeditor.d.ts,
    • ckeditor.js,
    • ckeditor.js.map.

    现在，您可以开始删除一些未使用的 webpack 插件并更新 webpack.config.js 文件。

  2. 卸载以下 devDependencies

npm uninstall \
@ckeditor/ckeditor5-dev-translations \
@ckeditor/ckeditor5-dev-utils \
@ckeditor/ckeditor5-theme-lark\
css-loader \
postcss \
postcss-loader \
raw-loader \
style-loader \
terser-webpack-plugin
  1. 安装以下包
npm install --save-dev \
css-loader \
css-minimizer-webpack-plugin \
mini-css-extract-plugin \
terser-webpack-plugin
  1. 更新 webpack.config.js 文件
'use strict';

/* eslint-env node */

const path = require( 'path' );
const TerserWebpackPlugin = require( 'terser-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const CssMinimizerPlugin = require( 'css-minimizer-webpack-plugin' );

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

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

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: {
    minimize: true,
    minimizer: [
        new CssMinimizerPlugin(),
        new TerserWebpackPlugin( {
            terserOptions: {
                output: {
                    // Preserve CKEditor 5 license comments.
                    comments: /^!/
                }
            },
            extractComments: false
        } )
    ]
},

plugins: [
    new MiniCssExtractPlugin( {
        filename: 'ckeditor.css'
    } ),
],

resolve: {
    extensions: [ '.ts', '.js', '.json' ]
},

module: {
    rules: [
        {
            test: /\.ts$/,
            use: 'ts-loader'
        },
        {
            test: /\.css$/i,
            use: [ MiniCssExtractPlugin.loader, 'css-loader' ]
        }
    ]
}
};
  1. 在 sample/index.html 文件中，在其他 CSS 文件之前添加以下行
<link rel="stylesheet" type="text/css" href="../build/ckeditor.css">
  1. 删除旧的 build 文件夹，并运行以下命令创建 CKEditor 5 的新版本。
npm run build

  1. 新 build 文件夹中应该有五个文件

    • ckeditor.css,
    • ckeditor.css.map,
    • ckeditor.d.ts,
    • ckeditor.js,
    • ckeditor.js.map.

新版本包含两个更多文件，因为 CSS 现在与 JavaScript 文件分离，与旧方法相比，这应该会提高性能。在更新使用 build 文件夹的项目时，请记住也要导入这个新的 CSS 文件。

此外，JavaScript 和 CSS 文件现在都经过了压缩，可能会提高性能。

如果您想进一步优化版本，请按照 优化版本大小 指南中的步骤操作。