Cómo integrar GrapesJS en una app Ruby on Rails (guía completa 2026)

Por qué GrapesJS encaja en Rails

GrapesJS es un editor exclusivo para navegador y licenciado por MIT, por lo que Rails sirve a la página del editor y expone los endpoints de carga/almacenamiento mientras GrapesJS se encarga de la interfaz. Esta guía construye una configuración funcional: una vista ERB que aloja el editor, un controlador que persiste contenido con protección CSRF y exportación HTML/CSS.

1. Renderizar el editor en una vista

Tu disposición de Rails ya incluye csrf_meta_tags. Crear 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. Inicializar GrapesJS con almacenamiento remoto

// 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. Rutas y controlador

# 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

El X-CSRF-Token encabezado satisface la falsificación por defecto de Rails para mantener activada la CSRF. Almacenar project como jsonb columna.

4. Renderizar la página exportada

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

Solo úsala raw para editores de confianza; limpia si no.

Consejos de producción

Para una configuración sólida de Rails, guarda el proyecto GrapesJS en una jsonb columna para que las consultas y actualizaciones parciales sean baratas, y mantén el renderizado html/css en sus propias columnas para un servicio rápido. Si cargas GrapesJS a través de importmap-rails en lugar de una CDN, fíjalo con bin/importmap pin grapesjs y confirma que se resuelve en producción donde difiere el host del activo. Mantén activada la protección contra falsificaciones de Rails — el X-CSRF-Token encabezado de csrf_meta_tags Rails la satisface. Y almacenan en caché la página publicada (caché de fragmentos o CDN), invalidando al guardar, para que el coste de renderizado del editor nunca llegue a los usuarios finales.

Requisitos previos

Necesitarás Ruby 3.x y una aplicación Rails 7. GrapesJS puede cargarse desde una CDN en una vista ERB o fijada con importmap-rails — no se necesita gema específica de Rails. El editor se ejecuta en el navegador y se publica en tus controladores, así que estoy familiarizado con vistas, rutas, controladores y la protección contra falsificaciones de Rails son suficientes.

Añadir bloques personalizados al editor

Registrar bloques arrastrables con el Gestor de bloques después grapesjs.initde:

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

Saca librerías de bloques y presets listos de GJS. Haz marketing para un conjunto más rico.

Análisis profundo del almacenamiento: un adaptador personalizado

Un adaptador de almacenamiento personalizado lee el token CSRF de la etiqueta meta y lo publica en tus rutas:

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' }

Guarda el proyecto en una jsonb columna para que se recargue exactamente en el editor.

Consejos de rendimiento

Carga GrapesJS solo en la pantalla de editor y pospone el script. Almacenar en caché el publicado página con caché de fragmentos Rails o una CDN y invalidar al guardar. Si cargas GrapesJS a través de importmap-rails, confirman que el pin se resuelve en producción donde el El host de activos difiere.

Consideraciones de seguridad

Mantén activada la protección contra falsificaciones — el X-CSRF-Token encabezado de csrf_meta_tags lo satisface. Añade un before_action eso autoriza al usuario actual antes de guardar. Solo usar raw/html_safe en el marcado almacenado cuando se confía en los editores; Si no, desinfecta la salida. Validar el tamaño de la carga útil.

Resolución de errores comunes

422 Entidad No Procesable suele significar que falta el token CSRF o rancio. Un lienzo sin estilo significa que la hoja de estilo no se cargó. Un editor en blanco significa que el selector de contenedores no coincide con nada. 413 significa que la carga útil del proyecto supera el límite corporal.

Cuándo usar GrapesJS con Rails

GrapesJS se adapta cuando tu app Rails necesita un editor visual integrado para tus usuarios Control — páginas de destino, correos electrónicos, un creador de marca blanca — respaldado por tu propio base de datos. Para texto rico en línea, un WYSIWYG más ligero es suficiente; para página completa composición con diseño, estilo y exportación HTML/CSS, GrapesJS es el más fuerte, Con licencia del MIT, opción autoalojada.

Próximos pasos

Véase el GrapesJS + Laravel relacionados. y guías de GrapesJS + Django , navega por el mercado de GrapesJS, o empieza desde el GJS. Página principal del mercado.

Preguntas frecuentes

¿Cómo guardo contenido de GrapesJS en un backend de Rails?

Configura el Gestor de Almacenamiento con type: 'remote' y apunta a Rutas ferroviarias. Envía el csrf-token valor meta como el X-CSRF-Token encabezado, luego almacenar el JSON del proyecto en un modelo.

¿Cómo cargo GrapesJS sin un paso de construcción pesado?

Inclúyelo desde una CDN en una vista ERB, o fijalo con importmap-rails — ambas opciones funcionan porque GrapesJS es JavaScript para navegador puro.

¿Dónde debería guardar el proyecto?

Usa una jsonb columna para el proyecto completo, además de columnas de texto opcionales para el HTML y CSS renderizados.