如何从CDN为CKEditor v5添加Source editing插件？

问题分析 #

你尝试的两种方式都存在配置问题：

• 第一种直接加载src目录下的源码文件：CKEditor 5的源码是ES模块结构，无法通过普通<script>标签直接加载，且依赖的核心模块未正确引入，同时代码里存在DOM选择器错误（#text-editor应为#editor）、注释的CSS标签语法错误。
• 第二种DLL方式：你没找到Source Editing插件的DLL构建路径，实际上所有官方插件的DLL包都在build目录下，而非src。

正确配置方案（推荐DLL方式） #

DLL构建是CKEditor 5官方推荐的CDN加载方式，所有插件会挂载到全局CKEditor5对象下，无需处理复杂的依赖关系。

完整代码示例 #

<!-- 加载CKEditor 5基础DLL -->
<script src="https://cdn.jsdelivr.net/npm/ckeditor5@39.0.0/build/ckeditor5.dll.js"></script>
<!-- 加载ClassicEditor的DLL构建 -->
<script src="https://cdn.jsdelivr.net/npm/@ckeditor/ckeditor5-editor-classic@39.0.0/build/ckeditor5-editor-classic.js"></script>
<!-- 加载Source Editing插件的DLL构建 -->
<script src="https://cdn.jsdelivr.net/npm/@ckeditor/ckeditor5-source-editing@39.0.0/build/ckeditor5-source-editing.js"></script>
<!-- 加载Source Editing插件的样式 -->
<link href="https://cdn.jsdelivr.net/npm/@ckeditor/ckeditor5-source-editing@39.0.0/build/ckeditor5-source-editing.css" rel="stylesheet">

<div id="editor">text</div>

<script>
  // 从全局CKEditor5对象中获取所需模块
  const { ClassicEditor } = CKEditor5.editorClassic;
  const { SourceEditing } = CKEditor5.sourceEditing;

  ClassicEditor
    .create(document.querySelector('#editor'), {
      plugins: [SourceEditing],
      toolbar: ['sourceEditing']
    })
    .then(editor => {
      console.log(editor);
    })
    .catch(error => {
      console.error(error);
    });
</script>

关键说明 #

• 所有资源必须使用相同版本号（示例中统一用39.0.0），避免版本不兼容导致的错误。
• Source Editing插件的DLL文件路径为@ckeditor/ckeditor5-source-editing@版本号/build/ckeditor5-source-editing.js，对应的CSS文件在同目录下。
• 必须先加载基础ckeditor5.dll.js，再加载编辑器和插件的DLL文件。

为什么第一种方式不可行 #

直接加载src目录下的文件是源码级别的ES模块，浏览器无法通过普通<script>标签解析，即使改用<script type="module">，也需要处理所有依赖模块的导入路径，这在CDN环境下会非常繁琐且容易出错，官方不推荐这种方式。

内容的提问来源于stack exchange，提问作者Radek