CKEditor 5 DLL 构建迁移指南从全局变量CKEditor5走向模块化新安装方式【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5DLLDynamic Link Library构建是 CKEditor 5 在 v42.0.0 之前提供的一种 webpack 专属安装方式它把编辑器及其插件打包成多个分片脚本统一注册到全局变量CKEditor5上再由页面脚本动态组装编辑器。自新版安装方式New Installation MethodsNIM推出后浏览器端构建已原生支持动态创建编辑器DLL 方式随之进入弃用流程支持期至2026 年第一季度末。本篇指南将带你完整走一遍从 DLL 构建迁移到新安装方式的三个步骤覆盖开源版与商业 Premium 功能两种场景并给出可复制的迁移前后对照示例同时结合本仓库源码解释新构建产物的生成机制让你理解为什么只需改导入方式。DLL 构建是什么一段依赖全局变量的历史方案在 v42.0.0 之前DLL 构建是 CKEditor 5 为在浏览器端动态创建编辑器与配置而设计的高级安装方式。它的核心机制是由 webpack 将ckeditor5及其插件包分别打包为独立的 JS 文件位于各包build/目录下这些文件运行时把导出注册到全局作用域变量CKEditor5上页面依次以script标签按依赖顺序加载这些文件后即可通过CKEditor5.editorClassic.ClassicEditor、CKEditor5.basicStyles.Bold等命名空间访问编辑器类和插件类并创建实例。DLL 方式主要被复杂的 CMS 系统采用因为它们需要在运行时而非构建期决定编辑器的插件组合。但也正因依赖全局状态它无法与任意现代打包器协作且插件与全局变量之间的顺序约定脆弱易错。为什么迁移新安装方式的核心差异新版安装方式v42.0.0 起引入将安装路径收敛为两种npm 包与浏览器构建CDN。两者都不再依赖全局变量而是所有开源插件统一从ckeditor5包导入商业功能从ckeditor5-premium-features包导入浏览器端通过script typeimportmap将包名映射到 CDN 构建 URL再用script typemodule以 ES Module 方式导入CSS 与 JavaScript 分离加载样式可按需定制或移除翻译改为以 JavaScript 对象形式传入编辑器配置不再依赖全局状态。因此从 DLL 迁移到新安装方式核心工作就是改写 CKEditor 5 及其插件的导入方式。另一个值得注意的差异是标签形态DLL 使用普通script标签而新浏览器构建使用script typemodule标签两者在严格模式、执行时机、作用域隔离、顶层await支持等方面行为不同详见 MDN 关于模块与普通脚本差异的说明。在开始迁移前请先沿常规升级路径把项目升级到最新版 CKEditor 5以排除因旧版本引入的干扰因素。特性对比新安装方式 vs 旧方式下表来自新安装方式总览文档 docs/updating/nim-migration/migration-to-new-installation-methods.md可以直观看到 DLL 方案表格最后一列在各个维度上的取舍能力新方法 npm新方法 CDN预构建Predefined自定义构建CustomDLL无需构建步骤❌✅✅❌✅可用于任意现代打包器✅✅✅❌❌允许添加插件✅✅❌✅✅样式定制✅✅❌⚠️ [1]❌图标定制✅❌❌✅❌不依赖全局状态✅✅❌❌❌提供编辑器专用/内容专用样式表✅✅❌❌❌样式与 JavaScript 分离✅✅❌⚠️ [2]❌可优化以减小包体积✅❌❌✅✅[1] 样式定制可通过 webpack 配置部分实现。[2] 可通过自定义 webpack 配置将 CSS 与 JavaScript 分离。可以看出DLL 方案依赖全局状态这一栏为 ❌这正是新安装方式要彻底解决的问题。弃用时间线根据仓库中的迁移总览文档DLL 构建将在2026 年第一季度3 月结束后正式停止支持届时DLL 相关文档将被移除该日期之后发布的新版 npm 包将不再包含build目录。由于 DLL 常被复杂 CMS 使用其弃用时间线显著长于其他旧方式预构建支持至 2025 年 Q1自定义构建与 DLL 均支持至 2026 年 Q1。建议在此窗口期内完成迁移。迁移步骤若你正在使用 DLL 构建请按以下三步操作。第一步移除加载 DLL 构建的script标签删除项目中所有指向 DLL 构建产物的script标签典型形如script srcpath/to/node_modules/ckeditor5/build/ckeditor5-dll.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-editor-classic/build/editor-classic.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-essentials/build/essentials.js/script !-- ... 其余插件分片 ... --第二步添加 CSSlink与包名映射script typeimportmap新方式要求先用link引入编辑器样式再用script typeimportmap把包名映射到 CDN 构建 URL。import map 是一种浏览器原生机制它让模块导入语句中的裸包名bare specifier如ckeditor5能够解析到具体 URL相当于在浏览器端做了一层包名路由。2.1 仅使用开源编辑器link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.css / script typeimportmap { imports: { ckeditor5: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.js, ckeditor5/: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ } } /script2.2 同时使用商业 Premium 功能在开源映射基础上追加ckeditor5-premium-features的样式与包名映射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说明文档中的{var ckeditor5-version}是文档模板变量发布时会替换为对应的实际版本号当前仓库中ckeditor5主包版本为 48.5.0见 packages/ckeditor5/package.json。映射ckeditor5/带尾部斜杠是为了让ckeditor5/translations/pl.js这类子路径导入也能被正确解析。第三步将初始化脚本改写为script typemodule把原来包含初始化代码的普通script替换为script typemodule在其中通过 ES Module 的import语句从ckeditor5与ckeditor5-premium-features包导入编辑器与插件不再访问全局CKEditor5变量。3.1 仅使用开源编辑器script typemodule import { ClassicEditor, Essentials, Bold, Italic, Paragraph } from ckeditor5; ClassicEditor.create( { attachTo: document.querySelector( #editor ), plugins: [ Essentials, Bold, Italic, Paragraph ], toolbar: [ /* ... */ ] } ); /script3.2 同时使用商业 Premium 功能script typemodule import { ClassicEditor, Essentials, Bold, Italic, Paragraph, Mention } from ckeditor5; import { SlashCommand } from ckeditor5-premium-features; ClassicEditor.create( { attachTo: document.querySelector( #editor ), plugins: [ Essentials, Bold, Italic, Paragraph, Mention, SlashCommand ], toolbar: [ /* ... */ ], licenseKey: YOUR_LICENSE_KEY, } ); /script使用商业功能时需在配置中传入licenseKey替换为你的实际授权密钥。attachTo指定编辑器挂载的目标 DOM 元素。完整示例迁移前后配置对照下面是一份功能完整的编辑器配置包含自动格式化、基础样式、引用块、标题、图片、缩进、链接、列表、媒体嵌入、从 Office 粘贴、表格等插件在迁移前后的 HTML 形态对比。迁移前DLL 构建script srcpath/to/node_modules/ckeditor5/build/ckeditor5-dll.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-editor-classic/build/editor-classic.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-autoformat/build/autoformat.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-basic-styles/build/basic-styles.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-block-quote/build/block-quote.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-essentials/build/essentials.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-heading/build/heading.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-image/build/image.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-indent/build/indent.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-link/build/link.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-list/build/list.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-media-embed/build/media-embed.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-paste-from-office/build/paste-from-office.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-table/build/table.js/script script const config { plugins: [ CKEditor5.autoformat.Autoformat, CKEditor5.basicStyles.Bold, CKEditor5.basicStyles.Italic, CKEditor5.blockQuote.BlockQuote, CKEditor5.essentials.Essentials, CKEditor5.heading.Heading, CKEditor5.image.Image, CKEditor5.image.ImageCaption, CKEditor5.image.ImageStyle, CKEditor5.image.ImageToolbar, CKEditor5.image.ImageUpload, CKEditor5.indent.Indent, CKEditor5.link.Link, CKEditor5.list.List, CKEditor5.mediaEmbed.MediaEmbed, CKEditor5.paragraph.Paragraph, CKEditor5.pasteFromOffice.PasteFromOffice, CKEditor5.table.Table, CKEditor5.table.TableToolbar ], toolbar: { items: [ heading, |, bold, italic, link, bulletedList, numberedList, |, outdent, indent, |, uploadImage, blockQuote, insertTable, mediaEmbed, undo, redo ] }, image: { toolbar: [ imageStyle:inline, imageStyle:block, imageStyle:side, |, toggleImageCaption, imageTextAlternative ] }, table: { contentToolbar: [ tableColumn, tableRow, mergeTableCells ] } }; CKEditor5.editorClassic.ClassicEditor .create( { attachTo: document.querySelector( #editor ), ...config } ) .then( editor { window.editor editor; } ); /script迁移后新安装方式link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.css / script typeimportmap { imports: { ckeditor5: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.js, ckeditor5/: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ } } /script script typemodule import { ClassicEditor, Autoformat, Bold, Italic, BlockQuote, Essentials, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar } from ckeditor5; const config { plugins: [ Autoformat, Bold, Italic, BlockQuote, Essentials, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar ], toolbar: { items: [ heading, |, bold, italic, link, bulletedList, numberedList, |, outdent, indent, |, uploadImage, blockQuote, insertTable, mediaEmbed, undo, redo ] }, image: { toolbar: [ imageStyle:inline, imageStyle:block, imageStyle:side, |, toggleImageCaption, imageTextAlternative ] }, table: { contentToolbar: [ tableColumn, tableRow, mergeTableCells ] } }; ClassicEditor .create( { attachTo: document.querySelector( #editor ), ...config } ) .then( editor { window.editor editor; } ); /script对照两份代码可以清晰看到迁移的本质插件类从CKEditor5.image.Image这样的全局命名空间取值变成了import { Image } from ckeditor5的模块导入14 个script分片标签收敛为 1 个 CSSlink 1 个 import map 1 个script typemodule。工具栏、图片与表格的配置对象则原样保留无需任何改动。新构建产物在源码里是如何生成的理解新安装方式为什么可以只改导入方式可以从本仓库的构建脚本中找到答案。统一导出一个包承载所有开源插件ckeditor5主包的入口文件 packages/ckeditor5/src/index.ts 将ckeditor/ckeditor5-*系列 60 余个开源包ckeditor5-ui、ckeditor5-core、ckeditor5-engine、ckeditor5-editor-classic、ckeditor5-basic-styles、ckeditor5-image、ckeditor5-table等全部export *到包根。这保证了浏览器端import { ClassicEditor, Image, Table } from ckeditor5与 npm 端import ... from ckeditor5拥有一致的 API 表面——这正是迁移后导入语句能直接对齐同名类的根本原因。同时packages/ckeditor5/package.json 中配置了发布时的exports映射.指向dist/ckeditor5.js./*指向dist/*使得包名、子路径导入如ckeditor5/translations/pl.js在构建期和运行期都能被解析。两种构建产物npm 构建与浏览器构建构建脚本 scripts/nim/build-ckeditor5.mjs 依次执行三步核心逻辑封装在 scripts/nim/utils.mjsinitializeCKEditor5NpmBuild()以src/index.ts为入口生成dist/ckeditor5.jsnpm 构建并同时产出 TypeScript 声明文件与翻译文件generateCKEditor5NpmBuild()以ckeditor5为 external 重新生成 npm 构建供包间依赖引用generateCKEditor5BrowserBuild()以dist/browser/ckeditor5.js为输出生成浏览器构建开启minify: true与browser: true其中name: CKEDITOR用于生成 UMD 全局命名——这是给无法使用 import map / ES Module 的旧环境的兜底方案。可以看到浏览器构建与 npm 构建都源自同一个src/index.ts入口因此无论你走 CDN浏览器构建还是 npm 包导入的类与用法完全一致。旧 DLL 方式中每个插件一个分片文件、靠全局变量串起来的复杂度在 NIM 中被一个统一入口、两套产物彻底替代。相关迁移路径迁移 DLL 构建只是整体升级的一部分仓库中 docs/updating/nim-migration/migration-to-new-installation-methods.md 提供了完整的迁移总览。若你同时维护自定义插件或使用其他旧安装方式请按需参考docs/updating/nim-migration/custom-plugins.md迁移自定义插件npm 发布或 monorepo 场景docs/updating/nim-migration/predefined-builds.md从预构建predefined builds迁移docs/updating/nim-migration/customized-builds.md从自定义构建迁移docs/updating/nim-migration/online-builder.md从旧版 Online Builder 迁移docs/updating/nim-migration/migrating-imports.mdv46 起统一后的公开 API 命名对照表docs/getting-started/integrations-cdn/quick-start.md新 CDN 安装方式的快速上手。如果你使用 React、Vue 或 Angular 官方集成还需相应升级ckeditor/ckeditor5-react^8.0.0、ckeditor/ckeditor5-vue^6.0.0、ckeditor/ckeditor5-angular^8.0.0。常见问题与注意事项{var ckeditor5-version}是什么它是文档模板变量会被替换为当前发布的版本号手动使用时替换为你要固定的版本即可可参考 packages/ckeditor5/package.json 中的当前版本。模块脚本与普通脚本的差异script typemodule默认处于严格模式、具备独立作用域不再污染全局、默认延迟执行defer语义并支持import/await import。这正是 DLL 迁移后行为可能有微妙变化之处迁移后建议在目标浏览器中做一次完整回归。老浏览器或受限环境怎么办若目标环境不支持 import map 或 ES Module可使用 UMD 构建兜底加载ckeditor5.umd.js/ckeditor5-premium-features.umd.js从全局对象对应源码构建脚本中的name: CKEDITOR解构出编辑器类与插件类使用。这是新安装方式中的特例而非回归全局变量方案。迁移后还需要 webpack 特殊配置吗不需要。新安装方式与任意现代打包器Vite、webpack 等及元框架如 Next.js开箱即用无需再维护 CKEditor 5 专属的 SVG/CSS/翻译 loader 配置。商业功能未显示或报错确认在配置中传入了正确的licenseKey且ckeditor5-premium-features的 CSS 与 import map 条目均已正确添加。【免费下载链接】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 DLL 构建迁移指南：从全局变量 `CKEditor5` 走向模块化新安装方式
CKEditor 5 DLL 构建迁移指南从全局变量CKEditor5走向模块化新安装方式【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5DLLDynamic Link Library构建是 CKEditor 5 在 v42.0.0 之前提供的一种 webpack 专属安装方式它把编辑器及其插件打包成多个分片脚本统一注册到全局变量CKEditor5上再由页面脚本动态组装编辑器。自新版安装方式New Installation MethodsNIM推出后浏览器端构建已原生支持动态创建编辑器DLL 方式随之进入弃用流程支持期至2026 年第一季度末。本篇指南将带你完整走一遍从 DLL 构建迁移到新安装方式的三个步骤覆盖开源版与商业 Premium 功能两种场景并给出可复制的迁移前后对照示例同时结合本仓库源码解释新构建产物的生成机制让你理解为什么只需改导入方式。DLL 构建是什么一段依赖全局变量的历史方案在 v42.0.0 之前DLL 构建是 CKEditor 5 为在浏览器端动态创建编辑器与配置而设计的高级安装方式。它的核心机制是由 webpack 将ckeditor5及其插件包分别打包为独立的 JS 文件位于各包build/目录下这些文件运行时把导出注册到全局作用域变量CKEditor5上页面依次以script标签按依赖顺序加载这些文件后即可通过CKEditor5.editorClassic.ClassicEditor、CKEditor5.basicStyles.Bold等命名空间访问编辑器类和插件类并创建实例。DLL 方式主要被复杂的 CMS 系统采用因为它们需要在运行时而非构建期决定编辑器的插件组合。但也正因依赖全局状态它无法与任意现代打包器协作且插件与全局变量之间的顺序约定脆弱易错。为什么迁移新安装方式的核心差异新版安装方式v42.0.0 起引入将安装路径收敛为两种npm 包与浏览器构建CDN。两者都不再依赖全局变量而是所有开源插件统一从ckeditor5包导入商业功能从ckeditor5-premium-features包导入浏览器端通过script typeimportmap将包名映射到 CDN 构建 URL再用script typemodule以 ES Module 方式导入CSS 与 JavaScript 分离加载样式可按需定制或移除翻译改为以 JavaScript 对象形式传入编辑器配置不再依赖全局状态。因此从 DLL 迁移到新安装方式核心工作就是改写 CKEditor 5 及其插件的导入方式。另一个值得注意的差异是标签形态DLL 使用普通script标签而新浏览器构建使用script typemodule标签两者在严格模式、执行时机、作用域隔离、顶层await支持等方面行为不同详见 MDN 关于模块与普通脚本差异的说明。在开始迁移前请先沿常规升级路径把项目升级到最新版 CKEditor 5以排除因旧版本引入的干扰因素。特性对比新安装方式 vs 旧方式下表来自新安装方式总览文档 docs/updating/nim-migration/migration-to-new-installation-methods.md可以直观看到 DLL 方案表格最后一列在各个维度上的取舍能力新方法 npm新方法 CDN预构建Predefined自定义构建CustomDLL无需构建步骤❌✅✅❌✅可用于任意现代打包器✅✅✅❌❌允许添加插件✅✅❌✅✅样式定制✅✅❌⚠️ [1]❌图标定制✅❌❌✅❌不依赖全局状态✅✅❌❌❌提供编辑器专用/内容专用样式表✅✅❌❌❌样式与 JavaScript 分离✅✅❌⚠️ [2]❌可优化以减小包体积✅❌❌✅✅[1] 样式定制可通过 webpack 配置部分实现。[2] 可通过自定义 webpack 配置将 CSS 与 JavaScript 分离。可以看出DLL 方案依赖全局状态这一栏为 ❌这正是新安装方式要彻底解决的问题。弃用时间线根据仓库中的迁移总览文档DLL 构建将在2026 年第一季度3 月结束后正式停止支持届时DLL 相关文档将被移除该日期之后发布的新版 npm 包将不再包含build目录。由于 DLL 常被复杂 CMS 使用其弃用时间线显著长于其他旧方式预构建支持至 2025 年 Q1自定义构建与 DLL 均支持至 2026 年 Q1。建议在此窗口期内完成迁移。迁移步骤若你正在使用 DLL 构建请按以下三步操作。第一步移除加载 DLL 构建的script标签删除项目中所有指向 DLL 构建产物的script标签典型形如script srcpath/to/node_modules/ckeditor5/build/ckeditor5-dll.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-editor-classic/build/editor-classic.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-essentials/build/essentials.js/script !-- ... 其余插件分片 ... --第二步添加 CSSlink与包名映射script typeimportmap新方式要求先用link引入编辑器样式再用script typeimportmap把包名映射到 CDN 构建 URL。import map 是一种浏览器原生机制它让模块导入语句中的裸包名bare specifier如ckeditor5能够解析到具体 URL相当于在浏览器端做了一层包名路由。2.1 仅使用开源编辑器link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.css / script typeimportmap { imports: { ckeditor5: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.js, ckeditor5/: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ } } /script2.2 同时使用商业 Premium 功能在开源映射基础上追加ckeditor5-premium-features的样式与包名映射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说明文档中的{var ckeditor5-version}是文档模板变量发布时会替换为对应的实际版本号当前仓库中ckeditor5主包版本为 48.5.0见 packages/ckeditor5/package.json。映射ckeditor5/带尾部斜杠是为了让ckeditor5/translations/pl.js这类子路径导入也能被正确解析。第三步将初始化脚本改写为script typemodule把原来包含初始化代码的普通script替换为script typemodule在其中通过 ES Module 的import语句从ckeditor5与ckeditor5-premium-features包导入编辑器与插件不再访问全局CKEditor5变量。3.1 仅使用开源编辑器script typemodule import { ClassicEditor, Essentials, Bold, Italic, Paragraph } from ckeditor5; ClassicEditor.create( { attachTo: document.querySelector( #editor ), plugins: [ Essentials, Bold, Italic, Paragraph ], toolbar: [ /* ... */ ] } ); /script3.2 同时使用商业 Premium 功能script typemodule import { ClassicEditor, Essentials, Bold, Italic, Paragraph, Mention } from ckeditor5; import { SlashCommand } from ckeditor5-premium-features; ClassicEditor.create( { attachTo: document.querySelector( #editor ), plugins: [ Essentials, Bold, Italic, Paragraph, Mention, SlashCommand ], toolbar: [ /* ... */ ], licenseKey: YOUR_LICENSE_KEY, } ); /script使用商业功能时需在配置中传入licenseKey替换为你的实际授权密钥。attachTo指定编辑器挂载的目标 DOM 元素。完整示例迁移前后配置对照下面是一份功能完整的编辑器配置包含自动格式化、基础样式、引用块、标题、图片、缩进、链接、列表、媒体嵌入、从 Office 粘贴、表格等插件在迁移前后的 HTML 形态对比。迁移前DLL 构建script srcpath/to/node_modules/ckeditor5/build/ckeditor5-dll.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-editor-classic/build/editor-classic.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-autoformat/build/autoformat.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-basic-styles/build/basic-styles.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-block-quote/build/block-quote.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-essentials/build/essentials.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-heading/build/heading.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-image/build/image.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-indent/build/indent.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-link/build/link.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-list/build/list.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-media-embed/build/media-embed.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-paste-from-office/build/paste-from-office.js/script script srcpath/to/node_modules/ckeditor/ckeditor5-table/build/table.js/script script const config { plugins: [ CKEditor5.autoformat.Autoformat, CKEditor5.basicStyles.Bold, CKEditor5.basicStyles.Italic, CKEditor5.blockQuote.BlockQuote, CKEditor5.essentials.Essentials, CKEditor5.heading.Heading, CKEditor5.image.Image, CKEditor5.image.ImageCaption, CKEditor5.image.ImageStyle, CKEditor5.image.ImageToolbar, CKEditor5.image.ImageUpload, CKEditor5.indent.Indent, CKEditor5.link.Link, CKEditor5.list.List, CKEditor5.mediaEmbed.MediaEmbed, CKEditor5.paragraph.Paragraph, CKEditor5.pasteFromOffice.PasteFromOffice, CKEditor5.table.Table, CKEditor5.table.TableToolbar ], toolbar: { items: [ heading, |, bold, italic, link, bulletedList, numberedList, |, outdent, indent, |, uploadImage, blockQuote, insertTable, mediaEmbed, undo, redo ] }, image: { toolbar: [ imageStyle:inline, imageStyle:block, imageStyle:side, |, toggleImageCaption, imageTextAlternative ] }, table: { contentToolbar: [ tableColumn, tableRow, mergeTableCells ] } }; CKEditor5.editorClassic.ClassicEditor .create( { attachTo: document.querySelector( #editor ), ...config } ) .then( editor { window.editor editor; } ); /script迁移后新安装方式link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.css / script typeimportmap { imports: { ckeditor5: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.js, ckeditor5/: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ } } /script script typemodule import { ClassicEditor, Autoformat, Bold, Italic, BlockQuote, Essentials, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar } from ckeditor5; const config { plugins: [ Autoformat, Bold, Italic, BlockQuote, Essentials, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar ], toolbar: { items: [ heading, |, bold, italic, link, bulletedList, numberedList, |, outdent, indent, |, uploadImage, blockQuote, insertTable, mediaEmbed, undo, redo ] }, image: { toolbar: [ imageStyle:inline, imageStyle:block, imageStyle:side, |, toggleImageCaption, imageTextAlternative ] }, table: { contentToolbar: [ tableColumn, tableRow, mergeTableCells ] } }; ClassicEditor .create( { attachTo: document.querySelector( #editor ), ...config } ) .then( editor { window.editor editor; } ); /script对照两份代码可以清晰看到迁移的本质插件类从CKEditor5.image.Image这样的全局命名空间取值变成了import { Image } from ckeditor5的模块导入14 个script分片标签收敛为 1 个 CSSlink 1 个 import map 1 个script typemodule。工具栏、图片与表格的配置对象则原样保留无需任何改动。新构建产物在源码里是如何生成的理解新安装方式为什么可以只改导入方式可以从本仓库的构建脚本中找到答案。统一导出一个包承载所有开源插件ckeditor5主包的入口文件 packages/ckeditor5/src/index.ts 将ckeditor/ckeditor5-*系列 60 余个开源包ckeditor5-ui、ckeditor5-core、ckeditor5-engine、ckeditor5-editor-classic、ckeditor5-basic-styles、ckeditor5-image、ckeditor5-table等全部export *到包根。这保证了浏览器端import { ClassicEditor, Image, Table } from ckeditor5与 npm 端import ... from ckeditor5拥有一致的 API 表面——这正是迁移后导入语句能直接对齐同名类的根本原因。同时packages/ckeditor5/package.json 中配置了发布时的exports映射.指向dist/ckeditor5.js./*指向dist/*使得包名、子路径导入如ckeditor5/translations/pl.js在构建期和运行期都能被解析。两种构建产物npm 构建与浏览器构建构建脚本 scripts/nim/build-ckeditor5.mjs 依次执行三步核心逻辑封装在 scripts/nim/utils.mjsinitializeCKEditor5NpmBuild()以src/index.ts为入口生成dist/ckeditor5.jsnpm 构建并同时产出 TypeScript 声明文件与翻译文件generateCKEditor5NpmBuild()以ckeditor5为 external 重新生成 npm 构建供包间依赖引用generateCKEditor5BrowserBuild()以dist/browser/ckeditor5.js为输出生成浏览器构建开启minify: true与browser: true其中name: CKEDITOR用于生成 UMD 全局命名——这是给无法使用 import map / ES Module 的旧环境的兜底方案。可以看到浏览器构建与 npm 构建都源自同一个src/index.ts入口因此无论你走 CDN浏览器构建还是 npm 包导入的类与用法完全一致。旧 DLL 方式中每个插件一个分片文件、靠全局变量串起来的复杂度在 NIM 中被一个统一入口、两套产物彻底替代。相关迁移路径迁移 DLL 构建只是整体升级的一部分仓库中 docs/updating/nim-migration/migration-to-new-installation-methods.md 提供了完整的迁移总览。若你同时维护自定义插件或使用其他旧安装方式请按需参考docs/updating/nim-migration/custom-plugins.md迁移自定义插件npm 发布或 monorepo 场景docs/updating/nim-migration/predefined-builds.md从预构建predefined builds迁移docs/updating/nim-migration/customized-builds.md从自定义构建迁移docs/updating/nim-migration/online-builder.md从旧版 Online Builder 迁移docs/updating/nim-migration/migrating-imports.mdv46 起统一后的公开 API 命名对照表docs/getting-started/integrations-cdn/quick-start.md新 CDN 安装方式的快速上手。如果你使用 React、Vue 或 Angular 官方集成还需相应升级ckeditor/ckeditor5-react^8.0.0、ckeditor/ckeditor5-vue^6.0.0、ckeditor/ckeditor5-angular^8.0.0。常见问题与注意事项{var ckeditor5-version}是什么它是文档模板变量会被替换为当前发布的版本号手动使用时替换为你要固定的版本即可可参考 packages/ckeditor5/package.json 中的当前版本。模块脚本与普通脚本的差异script typemodule默认处于严格模式、具备独立作用域不再污染全局、默认延迟执行defer语义并支持import/await import。这正是 DLL 迁移后行为可能有微妙变化之处迁移后建议在目标浏览器中做一次完整回归。老浏览器或受限环境怎么办若目标环境不支持 import map 或 ES Module可使用 UMD 构建兜底加载ckeditor5.umd.js/ckeditor5-premium-features.umd.js从全局对象对应源码构建脚本中的name: CKEDITOR解构出编辑器类与插件类使用。这是新安装方式中的特例而非回归全局变量方案。迁移后还需要 webpack 特殊配置吗不需要。新安装方式与任意现代打包器Vite、webpack 等及元框架如 Next.js开箱即用无需再维护 CKEditor 5 专属的 SVG/CSS/翻译 loader 配置。商业功能未显示或报错确认在配置中传入了正确的licenseKey且ckeditor5-premium-features的 CSS 与 import map 条目均已正确添加。【免费下载链接】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），仅供参考