EditorJS标题行内工具栏不显示，添加标题层级选项时报错的技术求助

我帮你搞定这个EditorJS的问题，你遇到的Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')错误，以及标题行内工具栏不显示的问题，根源有两个：

1. 全局inlineToolbar错误包含块级工具：header是块级工具（用来创建标题块），而非行内格式化工具（比如bold/italic），把它放到全局inlineToolbar里会让EditorJS找不到对应的行内工具实现，从而抛出错误，同时导致整个行内工具栏失效。
2. Header工具的层级配置缺失：你需要明确配置Header工具允许的标题层级，并启用它的专属工具栏来弹出层级选择按钮，而不是依赖全局行内工具栏。

修正后的完整代码 #

<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph@latest"></script>
<script>
 const raw = "{{$form.Content}}";
 const editor = new EditorJS({
  holder: "editor",
  data: { blocks: raw == "" ? [] : JSON.parse(raw) },
  // 全局行内工具栏只保留行内格式化工具（bold/italic）
  inlineToolbar: ["bold", "italic"],
  tools: {
   header: {
    class: Header,
    // 启用Header工具的专属工具栏（用于切换标题层级）
    toolbar: true,
    // 配置允许的标题层级，会在弹出按钮中显示
    config: {
     allowHeadingLevels: [1, 2, 3, 4, 5, 6]
    }
   },
   paragraph: {
    class: Paragraph,
    inlineToolbar: true
   },
  },
 });
 // the rest of unrelated code
</script>

关键配置说明 #

• 移除了全局inlineToolbar中的"header"，避免EditorJS查找不存在的行内工具。
• 在header工具的配置里：
  • toolbar: true：启用Header块专属的工具栏，点击标题块时会弹出层级选择按钮。
  • config.allowHeadingLevels：指定支持的标题层级（可按需调整，比如只保留[1,2,3]），对应的层级选项会显示在弹出工具栏中。

效果验证 #

配置完成后，当你添加或点击一个Header块时，就会看到弹出的标题层级选择按钮，同时行内工具栏（bold/italic）也能正常在选中文本时显示，那个TypeError错误也会消失。

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