如何在Rails 7中结合Importmap与Stimulus配置EditorJS？

你遇到的核心问题是pin错了包：你用的editor-js是一个老旧的非官方包（版本0.1.1），而真正的官方EditorJS包名是@editorjs/editorjs。下面是完整的正确配置流程：

1. 清理错误的依赖 #

先移除之前错误pin的包：

./bin/importmap unpin editor-js

同时把importmap.rb里所有和旧包相关的pin记录（比如babel-runtime、jquery那些）都删掉，避免冲突。

2. Pin官方EditorJS包 #

执行正确的pin命令：

./bin/importmap pin @editorjs/editorjs

这会在importmap.rb中生成正确的记录，类似：

pin "@editorjs/editorjs", to: "https://ga.jspm.io/npm:@editorjs/editorjs@2.29.0/dist/editorjs.mjs"

3. 创建Stimulus控制器 #

新建app/javascript/controllers/editor_controller.js，内容如下：

import { Controller } from "@hotwired/stimulus"
import EditorJS from "@editorjs/editorjs"

export default class extends Controller {
  static targets = ["editor"]

  connect() {
    this.editor = new EditorJS({
      holder: this.editorTarget,
      // 可添加EditorJS的自定义配置，比如工具栏、插件等
      tools: {
        // 示例：如果需要标题插件，先pin @editorjs/header再添加配置
        // header: {
        //   class: Header,
        //   inlineToolbar: true
        // }
      }
    })
  }

  disconnect() {
    // 页面销毁时清理EditorJS实例，避免内存泄漏
    if (this.editor) {
      this.editor.destroy()
    }
  }
}

4. 在视图中使用 #

在需要编辑器的页面添加以下代码：

<div data-controller="editor">
  <div data-editor-target="editor"></div>
</div>

5. （可选）添加EditorJS插件 #

如果需要使用官方插件（比如标题、列表、图片等），直接pin对应的包即可，比如：

./bin/importmap pin @editorjs/header

然后在控制器中导入并配置：

import Header from "@editorjs/header"

// 在tools中添加配置
tools: {
  header: {
    class: Header,
    config: {
      placeholder: '输入标题'
    }
  }
}

常见问题排查 #

• 如果控制台报错找不到模块，检查importmap.rb中的pin记录是否正确，确保包名是@editorjs/editorjs而非editor-js。
• 确保Stimulus控制器已正确注册（Rails 7默认会自动加载app/javascript/controllers下的所有控制器）。

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