Question 222062 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do you configure EditorJS in Rails 7 with importmap and Stimulus?

I’m trying to set up EditorJS as my content editor in my Rails 7 application using importmaps but running in to a few errors.

To pin EditorJS I ran ./bin/importmap pin editor-js in my terminal. This gave me the following in my importmap.rb

pin "editor-js", to: "https://ga.jspm.io/npm:[email protected]/src/js/editor.js"
pin "babel-runtime/core-js/weak-map", to: "https://ga.jspm.io/npm:[email protected]/core-js/weak-map.js"
pin "babel-runtime/helpers/classCallCheck", to: "https://ga.jspm.io/npm:[email protected]/helpers/classCallCheck.js"
pin "babel-runtime/helpers/createClass", to: "https://ga.jspm.io/npm:[email protected]/helpers/createClass.js"
pin "browser-split", to: "https://ga.jspm.io/npm:[email protected]/index.js"
pin "class-list", to: "https://ga.jspm.io/npm:[email protected]/index.js"
pin "core-js/library/fn/object/define-property", to: "https://ga.jspm.io/npm:[email protected]/library/fn/object/define-property.js"
pin "core-js/library/fn/weak-map", to: "https://ga.jspm.io/npm:[email protected]/library/fn/weak-map.js"
pin "editable", to: "https://ga.jspm.io/npm:[email protected]/index.js"
pin "es6-event-emitter", to: "https://ga.jspm.io/npm:[email protected]/dist/emitter.js"
pin "events", to: "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/events.js"
pin "html-element", to: "https://ga.jspm.io/npm:[email protected]/index.js"
pin "hyperscript", to: "https://ga.jspm.io/npm:[email protected]/index.js"
pin "indexof", to: "https://ga.jspm.io/npm:[email protected]/index.js"
pin "inherits", to: "https://ga.jspm.io/npm:[email protected]/inherits_browser.js"
pin "jquery", to: "https://ga.jspm.io/npm:[email protected]/dist/jquery.js"
pin "styles", to: "https://ga.jspm.io/npm:[email protected]/Gruntfile.js"
pin "text-content", to: "https://ga.jspm.io/npm:[email protected]/index.js"
pin "toastr", to: "https://ga.jspm.io/npm:[email protected]/toastr.js"

I then tried importing all these dependencies in my stiumulus controller along with editor-js but I am still getting console errors. This also feels like I’m just implementing it wrong.

Does anyone have any experience of configuring EditorJS in Rails 7 with importmaps and Stimulus?

Tags:

2

Answers


  1. 0

    I don’t think editor-js is the package you’re looking for. Insert Obi-wan gif here

    Try $ ./bin/importmap pin @editorjs/editorjs

    Login or Signup to reply.
  2. 0

    Configuring EditorJS in Rails 7 with importmaps and Stimulus should be a straightforward process. Here are the steps you can follow:

    1. Install EditorJS via importmap: You’ve already pinned the EditorJS and its dependencies in your importmap.rb, which is a good start.

    2. Create a Stimulus controller: Create a Stimulus controller to handle the initialization and interaction with EditorJS.

    3. Import EditorJS and its dependencies in the Stimulus controller: In your Stimulus controller file (e.g., editorjs_controller.js), import EditorJS and its dependencies using ES6 module imports.

    Here’s an example of how your Stimulus controller may look like:

    // app/javascript/controllers/editorjs_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  connect() {
    // Load EditorJS when the controller connects to the DOM
    this.loadEditor();
  }

  loadEditor() {
    const editorJS = new EditorJS({
      // Configuration options for EditorJS
      // Refer to EditorJS documentation for available options
    });

    // Optional: Save the instance for later access if needed
    this.editorJS = editorJS;
  }

  // You can add other methods to interact with EditorJS
  // For example, to save the content or interact with its data
}
    1. Make sure you have correctly set up the importmap: Double-check that you have the correct importmap configuration in your importmap.rb. The URL paths should point to valid locations for the EditorJS and its dependencies.
    2. Ensure you are using a compatible version of EditorJS: Make sure the version of EditorJS you are using is compatible with the dependencies and doesn’t introduce any breaking changes.
    3. Include the Stimulus controller in your views: In your HTML view where you want to use EditorJS, include the Stimulus controller using the data-controller attribute.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search