如何通过CDN使用Editor.js的区块扩展？

你遇到的Uncaught ReferenceError: Header is not defined错误，核心原因是没加载对应区块工具的CDN脚本，且CDN环境下工具是挂载到全局window对象上的，不需要用import引入。以下是具体配置步骤：

1. 按顺序加载CDN脚本 #

首先在HTML中，先加载Editor.js核心库，再加载需要的区块工具CDN，确保工具脚本在核心之后加载：

<!-- Editor.js 核心库 -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<!-- 加载Header区块工具 -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<!-- 可按需添加其他工具，比如List列表工具 -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>

2. 初始化时引用全局变量 #

每个工具CDN加载后，会在全局window对象上暴露对应的类（比如Header工具暴露Header，List工具暴露List），直接在tools配置中使用这些全局变量即可：

const editor = new EditorJS({
  holder: 'editorjs', // 绑定的DOM元素ID
  tools: {
    header: {
      class: Header, // 直接用全局的Header类
      config: {
        placeholder: '请输入标题',
        levels: [1, 2, 3],
        defaultLevel: 2
      }
    },
    list: {
      class: List, // 全局的List类
      inlineToolbar: true
    }
  }
});

注意事项 #

• 不同区块工具的全局变量名可能有差异，部分第三方工具可能会用类似EditorJSHeader这样的命名，需参考对应工具的官方文档确认。
• 确保工具CDN的版本与Editor.js核心版本兼容，避免因版本不匹配出现异常。

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