本文详解如何通过 cdn（如 unpkg 或 jsDelivr）为 CKEditor 5 Classic Editor 动态添加官方 source-editing 插件，无需构建工具，支持即用即配。
本文详解如何通过 cdn（如 unpkg 或 jsdelivr）为 ckeditor 5 classic editor 动态添加官方 `source-editing` 插件，无需构建工具，支持即用即配。
CKEditor 5 的源码编辑（Source Editing）功能默认不包含在经典编辑器（ClassicEditor）的标准 CDN 构建中，它是一个独立的可选插件，需显式加载并注册。由于 CKEditor 5 的模块化设计与严格的依赖管理，直接通过 @ckeditor/ckeditor5-source-editing 的源码路径（如 /src/index.min.js）引入会失败——因为该包未提供 UMD 或全局变量导出，且其内部依赖未被解析。正确方式是使用 CKEditor 官方推荐的 DLL（Dynamic Link Library）构建方案，该方案将插件编译为自包含、全局挂载的 JavaScript 模块，可通过 <script> 标签安全加载。</script>
✅ 正确加载方式（基于 DLL 构建）
CKEditor 团队为常用插件提供了预构建的 DLL 版本，托管在 npm 仓库中，可通过 unpkg 或 jsDelivr 直接引用。对于 source-editing 插件，应使用以下 URL：
<!-- 1. 加载 CKEditor 5 基础 DLL（必需） --> <script src="https://unpkg.com/@ckeditor/ckeditor5@44.0.0/build/ckeditor5-dll.js"></script> <!-- 2. 加载 Source Editing 插件 DLL（必需） --> <script src="https://unpkg.com/@ckeditor/ckeditor5-source-editing@44.0.0/build/source-editing.js"></script>✅ 注意：版本号（如 @44.0.0）必须与基础 DLL 版本严格一致，否则会导致插件注册失败或运行时错误。建议始终使用具体语义化版本号，避免 @latest 引发兼容性问题。
加载后，插件会自动挂载到全局 CKEditor5 对象下，路径为 CKEditor5.sourceEditing.SourceEditing。你可在配置中直接引用：
<div id="editor">Hello <strong>World</strong>!</div> <script> ClassicEditor .create(document.querySelector('#editor'), { plugins: [ // 必需的基础插件（按需补充） CKEditor5.essentials.Essentials, CKEditor5.uploadadapter.UploadAdapter, CKEditor5.autoformat.Autoformat, CKEditor5.blockquote.BlockQuote, CKEditor5.bold.Bold, CKEditor5.easymath.EasyMath, CKEditor5.heading.Heading, CKEditor5.image.Image, CKEditor5.image.ImageCaption, CKEditor5.image.ImageStyle, CKEditor5.image.ImageToolbar, CKEditor5.image.ImageUpload, CKEditor5.indentation.Indentation, CKEditor5.link.Link, CKEditor5.list.List, CKEditor5.mediaembed.MediaEmbed, CKEditor5.paragraph.Paragraph, CKEditor5.pasteFromOffice.PasteFromOffice, CKEditor5.table.Table, CKEditor5.table.TableToolbar, // ? 关键：注入 SourceEditing 插件 CKEditor5.sourceEditing.SourceEditing ], toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'uploadImage', 'blockQuote', 'mediaEmbed', 'undo', 'redo', '|', // ? 关键：添加源码编辑按钮 'sourceEditing' ] }) .then(editor => { console.log('Source editing enabled:', editor.plugins.has('SourceEditing')); }) .catch(error => { console.error('Editor initialization failed:', error); }); </script>⚠️ 常见错误与注意事项
-
❌ 错误示例：
// ❌ 不要这样引入（无 UMD 支持，会报 ReferenceError） <script src="https://cdn.jsdelivr.net/npm/@ckeditor/ckeditor5-source-editing@44.0.0/src/index.min.js"></script>此路径仅适用于 webpack/Vite 等打包环境，CDN 下无法解析 ES 模块依赖。
-
✅ 必须启用 sourceEditing 工具栏项：仅注册插件不显示按钮，务必在 toolbar 数组中加入 ‘sourceEditing’ 字符串。
-
? 可选样式增强：源码编辑器自带基础样式，但若需更佳视觉体验，可额外引入主题 CSS（非必需）：
<link rel="stylesheet" href="https://unpkg.com/@ckeditor/ckeditor5-source-editing@44.0.0/theme/sourceediting.css"> -
? 调试技巧：初始化后检查插件是否注册成功：
console.log(editor.plugins.names()); // 应包含 "SourceEditing"
✅ 总结
在 CDN 场景下启用 CKEditor 5 源码编辑功能，核心在于选用 DLL 构建而非源码包，并确保版本对齐与全局路径引用准确。该方案零构建、轻量可靠，适合快速原型、文档嵌入或 CMS 集成等场景。完整可运行示例见：JSFiddle Demo。