CKEditor 5 新安装方式迁移指南从 webpack 定制配置到 npm 包与浏览器构建v42.0.0【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5本篇指南聚焦 CKEditor 5 自 v42.0.0 起引入的新安装方式New Installation Methods简称 NIM。它回答三个问题旧安装方式预定义构建、自定义构建、DLL到底难在哪里新的 npm 包与浏览器构建两种路径应该如何落地配置以及旧方式各自的废弃时间表与迁移步骤。读完本篇你可以判断当前项目应采用哪种新安装方式、需要改动哪些配置并对照仓库源码理解ckeditor5统一入口包的实现原理。一、为什么需要新的安装方式旧方式的痛点在 42.0.0 之前CKEditor 5 有多种安装途径每一种都有各自的限制和怪癖在特定场景下难以甚至无法使用。由于各种配置彼此差异巨大官方文档也很难在不显得过度复杂的前提下覆盖所有可能。旧方式一个典型问题就是即使只是用 webpack 把编辑器打出来也必须维护一段 CKEditor 5 专属的构建配置来处理翻译、CSS 和 SVG 文件。下面是一个旧 npm 安装方式的真实示例引自官方迁移文档 migration-to-new-installation-methods.md// webpack.config.js const path require( path ); const { CKEditorTranslationsPlugin } require( ckeditor/ckeditor5-dev-translations ); const { styles } require( ckeditor/ckeditor5-dev-utils ); module.exports { entry: ./src/index.js, output: { path: path.resolve( __dirname, dist ), filename: bundle.js }, plugins: [ new CKEditorTranslationsPlugin( { language: en } ) ], module: { rules: [ { test: /\.svg$/, use: [ raw-loader ] }, { test: /ckeditor5-[^/\\][/\\]theme[/\\].\.css$/, use: [ { loader: style-loader, options: { injectType: singletonStyleTag, attributes: { data-cke: true } } }, css-loader, { loader: postcss-loader, options: { postcssOptions: styles.getPostCssConfig( { minify: true } ) } } ] } ] } };// src/index.js import { ClassicEditor } from ckeditor/ckeditor5-editor-classic; import { Essentials } from ckeditor/ckeditor5-essentials; import { Bold, Italic } from ckeditor/ckeditor5-basic-styles; import { Paragraph } from ckeditor/ckeditor5-paragraph; import { Mention } from ckeditor/ckeditor5-mention; import { FormatPainter } from ckeditor/ckeditor5-format-painter; import { SlashCommand } from ckeditor/ckeditor5-slash-command; ClassicEditor .create( { attachTo: document.querySelector( #editor ), plugins: [ Essentials, Bold, Italic, Paragraph, Mention, FormatPainter, SlashCommand ], toolbar: [ /* ... */ ], licenseKey: YOUR_LICENSE_KEY, // This value must be kept in sync with the language defined in webpack.config.js. language: en } );注意示例中这条注释language: en必须与 webpack 配置中CKEditorTranslationsPlugin的语言保持手动同步——翻译、样式、图标全部依赖构建时注入和全局状态这正是旧方式难以维护的根源。如果还想用 TypeScript这套配置只会更复杂。二、新安装方式只有两条路径新安装方式将可选路径收敛到仅两种npm 包和浏览器构建browser builds。与旧方式相比不再需要添加几十个独立 npm 包或 JavaScript bundle编辑器与所有开源插件从ckeditor5包导入商业功能从ckeditor5-premium-features包导入不需要任何 CKEditor 5 专属的 webpack 或 Vite 配置开箱即用于任何现代打包器或 Next.js 等 JavaScript 元框架。2.1 npm 包方式这是使用模块打包器Vite、webpack或流行元框架时的推荐方式。下面展示了同时使用开源与商业功能、并导入翻译的完整配置import { ClassicEditor, Essentials, Bold, Italic, Paragraph, Mention } from ckeditor5; import { FormatPainter, SlashCommand } from ckeditor5-premium-features; import coreTranslations from ckeditor5/translations/pl.js; import premiumFeaturesTranslations from ckeditor5-premium-features/translations/pl.js; import ckeditor5/ckeditor5.css; import ckeditor5-premium-features/ckeditor5-premium-features.css; ClassicEditor .create( { attachTo: document.querySelector( #editor ), plugins: [ Essentials, Bold, Italic, Paragraph, Mention, FormatPainter, SlashCommand ], toolbar: [ /* ... */ ], licenseKey: YOUR_LICENSE_KEY, translations: [ coreTranslations, premiumFeaturesTranslations ] } );配置要点统一入口所有开源能力编辑器类型、插件、指令都从ckeditor5这一个包导入商业功能从ckeditor5-premium-features导入。CSS 独立导入import ckeditor5/ckeditor5.css。样式与 JS 分离既利于性能也方便定制或删除默认编辑器样式。翻译作为对象传入ckeditor5/translations/pl.js等翻译文件是 ES 模块默认导出作为translations数组传给编辑器实例替代了旧方式依赖全局状态的副作用导入import ...。这一点在编辑器源码中有直接印证editor.ts 中创建编辑器时会执行const { translations defaultTranslations, ...rest } config;并将translations一并传入新建的Context约 L355–L363。零构建配置不再需要处理 SVG、CSS 主题选择器、翻译插件等 loader 规则。2.2 浏览器构建方式不打算使用模块打包器时可以使用浏览器构建。它以 JavaScript 模块形式发布可直接通过script typemodule加载配合 import maps 把包名映射到 CDN 上的构建 URL{var ckeditor5-version}处填入具体版本号link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.css / link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ckeditor5-premium-features.css / script typeimportmap { imports: { ckeditor5: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.js, ckeditor5/: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/, ckeditor5-premium-features: https://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ckeditor5-premium-features.js, ckeditor5-premium-features/: https://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ } } /script script typemodule import { ClassicEditor, Essentials, Bold, Italic, Paragraph, Mention } from ckeditor5; import { FormatPainter, SlashCommand } from ckeditor5-premium-features; import coreTranslations from ckeditor5/translations/pl.js; import premiumFeaturesTranslations from ckeditor5-premium-features/translations/pl.js; ClassicEditor .create( { attachTo: document.querySelector( #editor ), plugins: [ Essentials, Bold, Italic, Paragraph, Mention, FormatPainter, SlashCommand ], toolbar: [ /* ... */ ], licenseKey: YOUR_LICENSE_KEY, translations: [ coreTranslations, premiumFeaturesTranslations ] } ); /script注意 import map 中同时映射了ckeditor5主模块和ckeditor5/前缀映射后者正是import ckeditor5/translations/pl.js这类子路径导入能生效的原因。如果运行环境既不支持 import maps 也不支持 JavaScript 模块则使用UMD 构建。UMD 会注册全局变量供传统script标签脚本使用!-- Style sheets -- link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.css / link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ckeditor5-premium-features.css / !-- Scripts -- script srchttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.umd.js/script script srchttps://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ckeditor5-premium-features.umd.js/script !-- Translations -- script srchttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/translations/pl.umd.js/script script srchttps://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/translations/pl.umd.js/script script const { ClassicEditor, Essentials, Bold, Italic, Paragraph, Mention } CKEDITOR; const { FormatPainter, SlashCommand } CKEDITOR_PREMIUM_FEATURES; ClassicEditor .create( { attachTo: document.querySelector( #editor ), plugins: [ Essentials, Bold, Italic, Paragraph, Mention, FormatPainter, SlashCommand ], toolbar: [ /* ... */ ], licenseKey: YOUR_LICENSE_KEY } ); /scriptUMD 构建注册的全局变量是CKEDITOR核心与CKEDITOR_PREMIUM_FEATURES商业功能。这个命名在仓库构建脚本中可以直接核实scripts/nim/utils.mjs 的generateCKEditor5BrowserBuild()以name: CKEDITOR生成浏览器构建且browser: true与minify: true分别对应浏览器环境与压缩。三、新旧方式对比Whats new 与功能矩阵相比旧安装方式新方式有四个突出变化引自官方文档一切只从ckeditor5与ckeditor5-premium-features两个包导入浏览器中通过 import maps 将包名映射到构建 URLCSS 文件与 JS 文件分开导入提升性能并让定制/移除默认样式更简单翻译以 JavaScript 对象形式传给编辑器实例不再使用依赖全局状态的副作用导入无需再维护 CKEditor 5 专属的 webpack 或 Vite 配置可与任何现代打包器或元框架搭配。官方给出了新旧五种安装方式npm、CDN、预定义、自定义、DLL的功能对比矩阵安装方式npm新CDN新预定义构建自定义构建DLL无需构建步骤No build step❌✅✅❌✅可用于任何现代打包器✅✅✅❌❌允许添加插件✅✅❌✅✅样式定制✅✅❌⚠️¹❌图标定制✅❌❌✅❌不依赖全局状态✅✅❌❌❌提供编辑器/纯内容样式表✅✅❌❌❌样式表与 JavaScript 分离✅✅❌⚠️²❌可优化以减小 bundle 体积✅❌❌✅✅注¹ 自定义构建仅通过 webpack 配置部分支持样式定制² 自定义构建可通过自定义 webpack 配置把 CSS 从 JS 中分离。矩阵中预定义构建指ckeditor/ckeditor5-build-*系列 npm 包及其 CDN 对应物自定义构建指从源码或旧版 Online Builder 构建的包DLL 指 webpack DLL 插件方式。从表中可以看到新方式的独特组合CDN 路径零构建 可加插件 无全局状态npm 路径则额外支持图标定制与 bundle 优化tree-shaking 生效的前提是只用到的模块被实际 import这与 src/index.ts 的模块再导出结构相匹配。四、仓库源码印证ckeditor5统一入口包是怎么实现的新安装方式的核心是ckeditor5这个统一入口包。结合当前仓库源码可以看清它的实现1. 源码入口就是聚合再导出。packages/ckeditor5/src/index.ts 全文约 70 行逐个export * from ckeditor/ckeditor5-*覆盖 ui、core、engine、各编辑器类型及所有开源插件。文件头部注释特别说明了一个细节ckeditor/ckeditor5-ui的导出必须放在最上面因为打包后的样式表遵循该顺序而 ui 包的 theme 入口提供了其他样式所依赖的全局样式reset、CSS 变量。2. 发布形态以dist为入口。packages/ckeditor5/package.json 中开发态main指向./src/index.ts而publishConfig把main/exports切换到./dist/ckeditor5.js与./dist/index.d.ts子路径经./*: ./dist/*映射——这正是文档中子路径导入ckeditor5/translations/pl.js、ckeditor5/ckeditor5.css在发布包中成立的机制。files字段也表明发布产物只包含dist与文档类文件。3. 构建流程分三步。scripts/nim/build-ckeditor5.mjs 依次执行初始化 NPM 构建清理旧输出、生成 TypeScript 声明与翻译文件→ 生成dist/ckeditor5.jsESMexternal: [ckeditor5]→ 生成浏览器构建输出到dist/browser/ckeditor5.js压缩、挂载CKEDITOR全局名。这与上面 UMD 示例中全局变量的来源完全对应。4. 有回归测试保证再导出完整性。packages/ckeditor5/tests/node.js 遍历全部约 50 个ckeditor/ckeditor5-*子包断言ckeditor5统一入口的每个导出与对应子包的导出是同一引用expect( ckeditor5[ exportName ] ).toBe( pkg[ exportName ] )。这意味着从ckeditor5导入与从子包导入拿到的是同一份代码为树摇优化和类型解析提供了基础。五、旧安装方式的废弃时间表随着 42.0.0 发布官方决定废弃旧的设置方式。考虑到迁移需要排期官方承诺按下表时间线继续支持不因废弃路径而阻断错误修复与改进。5.1 预定义构建predefined buildsckeditor5-build-classic等官方预定义构建支持至2025 年第一季度末2025 年 3 月。该日期起移除预定义构建与 superbuild 的文档不再向 npm 发布预定义构建包的新版本构建环境目标提升至 ES2022从而放弃对 webpack 4 的支持。详见 predefined-builds 迁移指南。5.2 自定义构建custom buildswebpack-first 的自定义构建方式从src目录导入特定包支持至2026 年第一季度末2026 年 3 月。该日期起移除自定义构建文档新版 npm 包不再包含src目录dist成为主要导入入口所有导入都经由包索引进行这与第四节中publishConfig的exports设计一致废弃ckeditor/ckeditor5-dev-translations包新方式不再需要它待定事项可能废弃从CKEDITOR_TRANSLATIONS全局加载翻译——因为新安装方式提倡通过编辑器配置传入翻译。详见 customized-builds 迁移指南。5.3 DLL 构建DLL 是一种高级方式用于在浏览器端动态创建编辑器及其配置。由于浏览器构建现已开箱即用地提供同等能力DLL 同样被废弃考虑到其在复杂 CMS 中的使用深度时间线相对更长支持至 2026 年第一季度末2026 年 3 月。该日期起移除 DLL 文档此后发布的 npm 包新版本将不再带有build目录。详见 dll-builds 迁移指南。官方在上述时间线之外还维护了一个 GitHub issue 记录细节与对新安装方式的计划改进如果你对某个时间线有顾虑官方表示愿意讨论时间线或你需要的支持场景。六、迁移步骤从旧安装方式到新方式整体顺序是先迁移自定义插件包 → 再迁移主项目 → 最后更新框架集成包。6.1 第一步迁移自定义插件包如果你以独立包的形式维护任何 CKEditor 5 自定义插件无论是 monorepo 内还是发布到 npm需要先迁移它们详见 custom-plugins 迁移指南。核心改动包括用新版 package generator 重建项目、给 ESM 导入补全文件扩展名、把包根导入统一改写为ckeditor5。6.2 第二步按你所用的旧方式迁移主项目根据当前使用的旧安装方式选择对应指南预定义构建 → Migrating from predefined builds旧版 Online Builder → Migrating from legacy Online Builder自定义构建 → Migrating from customized buildsDLL 构建 → Migrating from DLL builds。无论走哪条路径最终形态都应达到第二节示例的目标状态只从ckeditor5/ckeditor5-premium-features导入、CSS 单独导入、翻译对象化传入、删除 CKEditor 专属的打包配置。6.3 第三步更新框架集成包如果使用官方的 React、Vue 或 Angular 集成需要一并升级集成包目标版本备注ckeditor/ckeditor5-react^8.0.0该版本引入了一处小破坏性变更需查阅该包的 CHANGELOGckeditor/ckeditor5-vue^6.0.0—ckeditor/ckeditor5-angular^8.0.0—6.4 遇到问题时迁移过程中如遇报错官方在 GitHub 仓库中维护了常见迁移错误issue 清单供排查若清单中没有你的问题可新开 issue 求助。七、小结新安装方式只有两条路径npm 包推荐配合任意现代打包器与浏览器构建script typemodule import maps无模块环境则用 UMD 全局变量CKEDITOR迁移收益是确定的单一入口包、CSS 与 JS 分离、翻译配置化、无专属构建配置从仓库源码看这一切由packages/ckeditor5的聚合再导出入口、以dist为发布主入口的exports设计、以及三步式构建脚本共同支撑并有 tests/node.js 保障导出完整性旧方式时间表预定义构建已于 2025 年 3 月 sunset自定义构建与 DLL 支持至 2026 年 3 月——如果你的项目仍在使用这些方式现在就是制定迁移计划的时候。【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 CKEditor 5 新安装方式迁移指南：从 webpack 定制配置到 npm 包与浏览器构建（v42.0.0+）
CKEditor 5 新安装方式迁移指南从 webpack 定制配置到 npm 包与浏览器构建v42.0.0【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5本篇指南聚焦 CKEditor 5 自 v42.0.0 起引入的新安装方式New Installation Methods简称 NIM。它回答三个问题旧安装方式预定义构建、自定义构建、DLL到底难在哪里新的 npm 包与浏览器构建两种路径应该如何落地配置以及旧方式各自的废弃时间表与迁移步骤。读完本篇你可以判断当前项目应采用哪种新安装方式、需要改动哪些配置并对照仓库源码理解ckeditor5统一入口包的实现原理。一、为什么需要新的安装方式旧方式的痛点在 42.0.0 之前CKEditor 5 有多种安装途径每一种都有各自的限制和怪癖在特定场景下难以甚至无法使用。由于各种配置彼此差异巨大官方文档也很难在不显得过度复杂的前提下覆盖所有可能。旧方式一个典型问题就是即使只是用 webpack 把编辑器打出来也必须维护一段 CKEditor 5 专属的构建配置来处理翻译、CSS 和 SVG 文件。下面是一个旧 npm 安装方式的真实示例引自官方迁移文档 migration-to-new-installation-methods.md// webpack.config.js const path require( path ); const { CKEditorTranslationsPlugin } require( ckeditor/ckeditor5-dev-translations ); const { styles } require( ckeditor/ckeditor5-dev-utils ); module.exports { entry: ./src/index.js, output: { path: path.resolve( __dirname, dist ), filename: bundle.js }, plugins: [ new CKEditorTranslationsPlugin( { language: en } ) ], module: { rules: [ { test: /\.svg$/, use: [ raw-loader ] }, { test: /ckeditor5-[^/\\][/\\]theme[/\\].\.css$/, use: [ { loader: style-loader, options: { injectType: singletonStyleTag, attributes: { data-cke: true } } }, css-loader, { loader: postcss-loader, options: { postcssOptions: styles.getPostCssConfig( { minify: true } ) } } ] } ] } };// src/index.js import { ClassicEditor } from ckeditor/ckeditor5-editor-classic; import { Essentials } from ckeditor/ckeditor5-essentials; import { Bold, Italic } from ckeditor/ckeditor5-basic-styles; import { Paragraph } from ckeditor/ckeditor5-paragraph; import { Mention } from ckeditor/ckeditor5-mention; import { FormatPainter } from ckeditor/ckeditor5-format-painter; import { SlashCommand } from ckeditor/ckeditor5-slash-command; ClassicEditor .create( { attachTo: document.querySelector( #editor ), plugins: [ Essentials, Bold, Italic, Paragraph, Mention, FormatPainter, SlashCommand ], toolbar: [ /* ... */ ], licenseKey: YOUR_LICENSE_KEY, // This value must be kept in sync with the language defined in webpack.config.js. language: en } );注意示例中这条注释language: en必须与 webpack 配置中CKEditorTranslationsPlugin的语言保持手动同步——翻译、样式、图标全部依赖构建时注入和全局状态这正是旧方式难以维护的根源。如果还想用 TypeScript这套配置只会更复杂。二、新安装方式只有两条路径新安装方式将可选路径收敛到仅两种npm 包和浏览器构建browser builds。与旧方式相比不再需要添加几十个独立 npm 包或 JavaScript bundle编辑器与所有开源插件从ckeditor5包导入商业功能从ckeditor5-premium-features包导入不需要任何 CKEditor 5 专属的 webpack 或 Vite 配置开箱即用于任何现代打包器或 Next.js 等 JavaScript 元框架。2.1 npm 包方式这是使用模块打包器Vite、webpack或流行元框架时的推荐方式。下面展示了同时使用开源与商业功能、并导入翻译的完整配置import { ClassicEditor, Essentials, Bold, Italic, Paragraph, Mention } from ckeditor5; import { FormatPainter, SlashCommand } from ckeditor5-premium-features; import coreTranslations from ckeditor5/translations/pl.js; import premiumFeaturesTranslations from ckeditor5-premium-features/translations/pl.js; import ckeditor5/ckeditor5.css; import ckeditor5-premium-features/ckeditor5-premium-features.css; ClassicEditor .create( { attachTo: document.querySelector( #editor ), plugins: [ Essentials, Bold, Italic, Paragraph, Mention, FormatPainter, SlashCommand ], toolbar: [ /* ... */ ], licenseKey: YOUR_LICENSE_KEY, translations: [ coreTranslations, premiumFeaturesTranslations ] } );配置要点统一入口所有开源能力编辑器类型、插件、指令都从ckeditor5这一个包导入商业功能从ckeditor5-premium-features导入。CSS 独立导入import ckeditor5/ckeditor5.css。样式与 JS 分离既利于性能也方便定制或删除默认编辑器样式。翻译作为对象传入ckeditor5/translations/pl.js等翻译文件是 ES 模块默认导出作为translations数组传给编辑器实例替代了旧方式依赖全局状态的副作用导入import ...。这一点在编辑器源码中有直接印证editor.ts 中创建编辑器时会执行const { translations defaultTranslations, ...rest } config;并将translations一并传入新建的Context约 L355–L363。零构建配置不再需要处理 SVG、CSS 主题选择器、翻译插件等 loader 规则。2.2 浏览器构建方式不打算使用模块打包器时可以使用浏览器构建。它以 JavaScript 模块形式发布可直接通过script typemodule加载配合 import maps 把包名映射到 CDN 上的构建 URL{var ckeditor5-version}处填入具体版本号link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.css / link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ckeditor5-premium-features.css / script typeimportmap { imports: { ckeditor5: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.js, ckeditor5/: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/, ckeditor5-premium-features: https://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ckeditor5-premium-features.js, ckeditor5-premium-features/: https://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ } } /script script typemodule import { ClassicEditor, Essentials, Bold, Italic, Paragraph, Mention } from ckeditor5; import { FormatPainter, SlashCommand } from ckeditor5-premium-features; import coreTranslations from ckeditor5/translations/pl.js; import premiumFeaturesTranslations from ckeditor5-premium-features/translations/pl.js; ClassicEditor .create( { attachTo: document.querySelector( #editor ), plugins: [ Essentials, Bold, Italic, Paragraph, Mention, FormatPainter, SlashCommand ], toolbar: [ /* ... */ ], licenseKey: YOUR_LICENSE_KEY, translations: [ coreTranslations, premiumFeaturesTranslations ] } ); /script注意 import map 中同时映射了ckeditor5主模块和ckeditor5/前缀映射后者正是import ckeditor5/translations/pl.js这类子路径导入能生效的原因。如果运行环境既不支持 import maps 也不支持 JavaScript 模块则使用UMD 构建。UMD 会注册全局变量供传统script标签脚本使用!-- Style sheets -- link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.css / link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ckeditor5-premium-features.css / !-- Scripts -- script srchttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.umd.js/script script srchttps://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ckeditor5-premium-features.umd.js/script !-- Translations -- script srchttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/translations/pl.umd.js/script script srchttps://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/translations/pl.umd.js/script script const { ClassicEditor, Essentials, Bold, Italic, Paragraph, Mention } CKEDITOR; const { FormatPainter, SlashCommand } CKEDITOR_PREMIUM_FEATURES; ClassicEditor .create( { attachTo: document.querySelector( #editor ), plugins: [ Essentials, Bold, Italic, Paragraph, Mention, FormatPainter, SlashCommand ], toolbar: [ /* ... */ ], licenseKey: YOUR_LICENSE_KEY } ); /scriptUMD 构建注册的全局变量是CKEDITOR核心与CKEDITOR_PREMIUM_FEATURES商业功能。这个命名在仓库构建脚本中可以直接核实scripts/nim/utils.mjs 的generateCKEditor5BrowserBuild()以name: CKEDITOR生成浏览器构建且browser: true与minify: true分别对应浏览器环境与压缩。三、新旧方式对比Whats new 与功能矩阵相比旧安装方式新方式有四个突出变化引自官方文档一切只从ckeditor5与ckeditor5-premium-features两个包导入浏览器中通过 import maps 将包名映射到构建 URLCSS 文件与 JS 文件分开导入提升性能并让定制/移除默认样式更简单翻译以 JavaScript 对象形式传给编辑器实例不再使用依赖全局状态的副作用导入无需再维护 CKEditor 5 专属的 webpack 或 Vite 配置可与任何现代打包器或元框架搭配。官方给出了新旧五种安装方式npm、CDN、预定义、自定义、DLL的功能对比矩阵安装方式npm新CDN新预定义构建自定义构建DLL无需构建步骤No build step❌✅✅❌✅可用于任何现代打包器✅✅✅❌❌允许添加插件✅✅❌✅✅样式定制✅✅❌⚠️¹❌图标定制✅❌❌✅❌不依赖全局状态✅✅❌❌❌提供编辑器/纯内容样式表✅✅❌❌❌样式表与 JavaScript 分离✅✅❌⚠️²❌可优化以减小 bundle 体积✅❌❌✅✅注¹ 自定义构建仅通过 webpack 配置部分支持样式定制² 自定义构建可通过自定义 webpack 配置把 CSS 从 JS 中分离。矩阵中预定义构建指ckeditor/ckeditor5-build-*系列 npm 包及其 CDN 对应物自定义构建指从源码或旧版 Online Builder 构建的包DLL 指 webpack DLL 插件方式。从表中可以看到新方式的独特组合CDN 路径零构建 可加插件 无全局状态npm 路径则额外支持图标定制与 bundle 优化tree-shaking 生效的前提是只用到的模块被实际 import这与 src/index.ts 的模块再导出结构相匹配。四、仓库源码印证ckeditor5统一入口包是怎么实现的新安装方式的核心是ckeditor5这个统一入口包。结合当前仓库源码可以看清它的实现1. 源码入口就是聚合再导出。packages/ckeditor5/src/index.ts 全文约 70 行逐个export * from ckeditor/ckeditor5-*覆盖 ui、core、engine、各编辑器类型及所有开源插件。文件头部注释特别说明了一个细节ckeditor/ckeditor5-ui的导出必须放在最上面因为打包后的样式表遵循该顺序而 ui 包的 theme 入口提供了其他样式所依赖的全局样式reset、CSS 变量。2. 发布形态以dist为入口。packages/ckeditor5/package.json 中开发态main指向./src/index.ts而publishConfig把main/exports切换到./dist/ckeditor5.js与./dist/index.d.ts子路径经./*: ./dist/*映射——这正是文档中子路径导入ckeditor5/translations/pl.js、ckeditor5/ckeditor5.css在发布包中成立的机制。files字段也表明发布产物只包含dist与文档类文件。3. 构建流程分三步。scripts/nim/build-ckeditor5.mjs 依次执行初始化 NPM 构建清理旧输出、生成 TypeScript 声明与翻译文件→ 生成dist/ckeditor5.jsESMexternal: [ckeditor5]→ 生成浏览器构建输出到dist/browser/ckeditor5.js压缩、挂载CKEDITOR全局名。这与上面 UMD 示例中全局变量的来源完全对应。4. 有回归测试保证再导出完整性。packages/ckeditor5/tests/node.js 遍历全部约 50 个ckeditor/ckeditor5-*子包断言ckeditor5统一入口的每个导出与对应子包的导出是同一引用expect( ckeditor5[ exportName ] ).toBe( pkg[ exportName ] )。这意味着从ckeditor5导入与从子包导入拿到的是同一份代码为树摇优化和类型解析提供了基础。五、旧安装方式的废弃时间表随着 42.0.0 发布官方决定废弃旧的设置方式。考虑到迁移需要排期官方承诺按下表时间线继续支持不因废弃路径而阻断错误修复与改进。5.1 预定义构建predefined buildsckeditor5-build-classic等官方预定义构建支持至2025 年第一季度末2025 年 3 月。该日期起移除预定义构建与 superbuild 的文档不再向 npm 发布预定义构建包的新版本构建环境目标提升至 ES2022从而放弃对 webpack 4 的支持。详见 predefined-builds 迁移指南。5.2 自定义构建custom buildswebpack-first 的自定义构建方式从src目录导入特定包支持至2026 年第一季度末2026 年 3 月。该日期起移除自定义构建文档新版 npm 包不再包含src目录dist成为主要导入入口所有导入都经由包索引进行这与第四节中publishConfig的exports设计一致废弃ckeditor/ckeditor5-dev-translations包新方式不再需要它待定事项可能废弃从CKEDITOR_TRANSLATIONS全局加载翻译——因为新安装方式提倡通过编辑器配置传入翻译。详见 customized-builds 迁移指南。5.3 DLL 构建DLL 是一种高级方式用于在浏览器端动态创建编辑器及其配置。由于浏览器构建现已开箱即用地提供同等能力DLL 同样被废弃考虑到其在复杂 CMS 中的使用深度时间线相对更长支持至 2026 年第一季度末2026 年 3 月。该日期起移除 DLL 文档此后发布的 npm 包新版本将不再带有build目录。详见 dll-builds 迁移指南。官方在上述时间线之外还维护了一个 GitHub issue 记录细节与对新安装方式的计划改进如果你对某个时间线有顾虑官方表示愿意讨论时间线或你需要的支持场景。六、迁移步骤从旧安装方式到新方式整体顺序是先迁移自定义插件包 → 再迁移主项目 → 最后更新框架集成包。6.1 第一步迁移自定义插件包如果你以独立包的形式维护任何 CKEditor 5 自定义插件无论是 monorepo 内还是发布到 npm需要先迁移它们详见 custom-plugins 迁移指南。核心改动包括用新版 package generator 重建项目、给 ESM 导入补全文件扩展名、把包根导入统一改写为ckeditor5。6.2 第二步按你所用的旧方式迁移主项目根据当前使用的旧安装方式选择对应指南预定义构建 → Migrating from predefined builds旧版 Online Builder → Migrating from legacy Online Builder自定义构建 → Migrating from customized buildsDLL 构建 → Migrating from DLL builds。无论走哪条路径最终形态都应达到第二节示例的目标状态只从ckeditor5/ckeditor5-premium-features导入、CSS 单独导入、翻译对象化传入、删除 CKEditor 专属的打包配置。6.3 第三步更新框架集成包如果使用官方的 React、Vue 或 Angular 集成需要一并升级集成包目标版本备注ckeditor/ckeditor5-react^8.0.0该版本引入了一处小破坏性变更需查阅该包的 CHANGELOGckeditor/ckeditor5-vue^6.0.0—ckeditor/ckeditor5-angular^8.0.0—6.4 遇到问题时迁移过程中如遇报错官方在 GitHub 仓库中维护了常见迁移错误issue 清单供排查若清单中没有你的问题可新开 issue 求助。七、小结新安装方式只有两条路径npm 包推荐配合任意现代打包器与浏览器构建script typemodule import maps无模块环境则用 UMD 全局变量CKEDITOR迁移收益是确定的单一入口包、CSS 与 JS 分离、翻译配置化、无专属构建配置从仓库源码看这一切由packages/ckeditor5的聚合再导出入口、以dist为发布主入口的exports设计、以及三步式构建脚本共同支撑并有 tests/node.js 保障导出完整性旧方式时间表预定义构建已于 2025 年 3 月 sunset自定义构建与 DLL 支持至 2026 年 3 月——如果你的项目仍在使用这些方式现在就是制定迁移计划的时候。【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考