本文详解如何通过 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。
