Wie man GrapesJS in eine Ruby on Rails App integriert (vollständiger Leitfaden 2026)

Warum GrapesJS zu Rails passt

GrapesJS ist ein browserfreier, vom MIT lizenzierter Editor, daher bedient Rails die Editor-Seite und stellt Lade-/Speicher-Endpunkte frei, während GrapesJS die Benutzeroberfläche übernimmt. Dieser Leitfaden baut ein funktionierendes Setup: eine ERB-Ansicht, die den Editor hostet, ein Controller, der erhalten bleibt Inhalte mit CSRF-Schutz und HTML/CSS-Export.

1. Den Editor in einer Ansicht darstellen

Dein Rails-Layout beinhaltet csrf_meta_tagsbereits . Erstellen Sie app/views/editor/show.html.erb:

<div id="gjs"><h1>Edit me in GrapesJS</h1></div>
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<%= javascript_include_tag "editor" %>

2. Initialisieren Sie GrapesJS mit Fernspeicher

// app/javascript/editor.js
const csrf = document
  .querySelector('meta[name="csrf-token"]')
  .getAttribute('content');

const editor = grapesjs.init({
  container: '#gjs',
  height: '100vh',
  fromElement: true,
  storageManager: {
    type: 'remote',
    stepsBeforeSave: 3,
    options: {
      remote: {
        urlStore: '/editor/save',
        urlLoad: '/editor/load',
        headers: { 'X-CSRF-Token': csrf },
      },
    },
  },
});

3. Routen und Controller

# config/routes.rb
get  "editor",      to: "editor#show"
get  "editor/load", to: "editor#load"
post "editor/save", to: "editor#save"

# app/controllers/editor_controller.rb
class EditorController < ApplicationController
  def show; end

  def load
    page = Page.find_or_create_by(key: "home")
    render json: (page.project || {})
  end

  def save
    page = Page.find_or_create_by(key: "home")
    page.update!(
      project: params.permit!.to_h,
      html: params["gjs-html"],
      css: params["gjs-css"]
    )
    render json: { status: "ok" }
  end
end

Der X-CSRF-Token Header erfüllt die Standardfälschung von Rails Schutz, also lässt du CSRF an. Speichern project als jsonb Spalte.

4. Rendern Sie die exportierte Seite

<style><%= raw @page.css %></style>
<%= raw @page.html %>

Nur für vertrauenswürdige Editoren verwenden raw ; sonst desinfizieren.

Produktionstipps

Für ein solides Rails-Setup speichere das GrapesJS-Projekt in einer jsonb Spalte, damit Abfragen und Teilupdates günstig bleiben, und behalte die gerenderten html/css in eigenen Spalten für schnelle Auslieferungen. Wenn du GrapesJS über Importmap-Rails statt über ein CDN lädst, pinne es mit bin/importmap pin grapesjs und bestätige, dass es in der Produktion dort aufgelöst wird, wo der Asset-Host abweicht. Lass den Fälschungsschutz von Rails eingeschaltet – der X-CSRF-Token Header csrf_meta_tags erfüllt ihn. Und die veröffentlichte Seite (Fragment-Cache oder CDN) zwischenspeichern, wodurch sie beim Speicherstand ungültig werden, sodass die Renderkosten des Editors nie die Endnutzer erreichen.

Voraussetzungen

Du brauchst Ruby 3.x und eine Rails 7-Anwendung. GrapesJS kann von einem CDN geladen werden in einer ERB-Ansicht oder mit Importmap-Rails gepinnt – kein Rails-spezifischer Edelstein wird benötigt. Der Editor läuft im Browser und postet an deine Controller, also ist du damit vertraut Ansichten, Routen, Controller und der Fälschungsschutz von Rails reichen aus.

Fügen Sie benutzerdefinierte Blöcke zum Editor hinzu

Registrieren Sie ziehbare Blöcke mit dem Blockmanager nach grapesjs.init:

editor.BlockManager.add('hero', {
  label: 'Hero section',
  category: 'Sections',
  content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});

Ziehe fertige Blockbibliotheken und Presets aus GJS.Market für ein reichhaltigeres Set.

Storage Deep-Dive: ein maßgeschneiderter Adapter

Ein benutzerdefinierter Speicheradapter liest das CSRF-Token vom Meta-Tag und postet auf deine Routen:

const csrf = document.querySelector('meta[name="csrf-token"]').content;
editor.Storage.add('rails-store', {
  async load() {
    const res = await fetch('/editor/load');
    return res.ok ? res.json() : {};
  },
  async store(data) {
    await fetch('/editor/save', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
      body: JSON.stringify(data),
    });
  },
});
// then: storageManager: { type: 'rails-store' }

Speichere das Projekt in einer jsonb Spalte, damit es exakt wieder in den Editor geladen wird.

Aufführungstipps

Lade GrapesJS nur auf dem Editor-Bildschirm und verschiebe das Skript. Cache die veröffentlichten Seite mit Rails-Fragment-Caching oder einem CDN und beim Speicherstand ungültig machen. Wenn du lädst GrapesJS über Importmap-Rails, bestätigen Sie, dass der Pin in der Produktion aufgelöst wird, wo der Asset Host unterscheidet sich.

Sicherheitsaspekte

Fälschungsschutz anbringen – der X-CSRF-Token Header von csrf_meta_tags erfüllt es. Füge ein before_action That hinzu autorisiert den aktuellen Benutzer vor dem Speichern. Nur verwenden raw/html_safe bei gespeichertem Markup, wenn Editoren vertrauenswürdig sind; Ansonsten desinfizieren Sie die Ausgabe. Validieren Die Nutzlastgröße.

Fehlerbehebung häufiger Fehler

422 Unprozessable Entity bedeutet in der Regel, dass das CSRF-Token fehlt oder abgestanden. Eine ungestaltete Leinwand bedeutet, dass das Stylesheet nicht geladen wurde. Ein leerer Editor bedeutet, dass der Container-Selektor mit nichts übereinstimmt hat. 413 bedeutet, dass die Projektnutzlast die Körpergrenze überschreitet.

Wann sollte man GrapesJS mit Rails verwenden

GrapesJS passt, wenn Ihre Rails-App einen eingebetteten visuellen Editor für Ihre Nutzer benötigt Control – Landingpages, E-Mails, ein White-Label-Builder – unterstützt von deinem eigenen Datenbank. Für Inline-Rich Text reicht ein leichteres WYSIWYG aus; für ganzseitige Komposition mit Layout, Styling und HTML/CSS-Export, GrapesJS ist der stärkere, MIT-lizenzierte, selbstgehostete Wahl.

Nächste Schritte

Siehe die zugehörigen GrapesJS + Laravel und GrapesJS + Django Guides, Durchstöbern Sie den GrapesJS-Marktplatz oder starten Sie auf dem GJS.Market-Startseite.

FAQ

Wie speichere ich GrapesJS-Inhalte im Rails-Backend?

Konfigurieren Sie den Storage Manager mit type: 'remote' und zeigen Sie auf Rails-Routen. Senden Sie den csrf-token Metawert als X-CSRF-Token Header, dann das Projekt-JSON auf einem Modell speichern.

Wie lade ich GrapesJS ohne einen schweren Build-Schritt?

Fügen Sie es aus einem CDN in eine ERB-Ansicht ein oder pinnen Sie es mit Importmap-Rails – beides funktioniert weil GrapesJS einfaches Browser-JavaScript ist.

Wo sollte ich das Projekt aufbewahren?

Verwenden Sie eine Spalte jsonb für das vollständige Projekt sowie optionale Textspalten Für das gerenderte HTML und CSS.