Crea un Constructor de Páginas WYSIWYG con GrapesJS

Haz clic en cualquier elemento de abajo, vuelve a escribirlo en su sitio y luego cambia cómo se ve. Nada aquí es una vista previa: el lienzo es la página, y el panel de estilo edita los mismos elementos que estás leyendo.

El editor de stock: lienzo, bloques, árbol de capas, gestor de estilos y conmutador de dispositivos, sin nada añadido.

WYSIWYG significa "Lo que ves es lo que obtienes". Un editor WYSIWYG permite a los usuarios trabajar con una representación visual de su contenido en lugar de editar directamente HTML y CSS en bruto. La página que están mirando mientras trabajan es la página que publicarán.

Los usuarios pueden ver la página mientras la construyen.

Un editor de texto enriquecido es la herramienta adecuada para un párrafo. Formatea el texto, gestiona encabezados y listas, y gestiona el contenido en línea. Un constructor de páginas funciona a un nivel superior: en las secciones, columnas, componentes, imágenes, botones, estilo y comportamiento responsivo que conforman la página alrededor de ese texto.

GrapesJS combina edición visual de páginas con una arquitectura de componentes extensible — y aún así contiene un editor de texto rico, porque editar un párrafo en el lugar es la mitad de lo que significa WYSIWYG. Si tu producto ya utiliza CKEditor, TinyMCE, Froala o Quill, puedes conservarlo: las integraciones para cada una están en GJS.Market.

Los bloques de construcción de una experiencia de edición visual, todos parte del núcleo de GrapesJS más que algo que uno mismo ensamble.

El mismo motor de edición visual se encuentra debajo de productos muy diferentes. Estas son las formas que más suele adoptar.

La edición visual suele ser solicitada por un equipo y construida por otro. Estas son las personas que están en ambos lados de esa conversación.

De serie, el editor conoce el texto, las imágenes, los botones y las secciones. Lo que hace que se sienta nativo para tu aplicación es enseñarle sobre los objetos que ya tiene.

1. 01
2. ↓02
3. ↓03
4. ↓Extiende el editor con componentes que coincidan con los objetos, contenido y flujos de trabajo de tu aplicación.

Los ejemplos del tercer peldaño son componentes que construirías para tu propio producto, no plugins disponibles para descargar. GrapesJS te da la API del componente; lo que el componente sabe depende de ti.

Previsualiza y ajusta tus diseños según el tamaño de los viewports mientras trabajas dentro del editor visual, en lugar de publicar y revisar en el móvil.

Los dispositivos son configurables: los tres anteriores son los valores predeterminados, y puedes definir los puntos de interrupción que realmente use tu sistema de diseño. Los estilos establecidos en un dispositivo más estrecho se aplican desde ese punto de ruptura hacia abajo.

GrapesJS proporciona la capa de edición visual. Todo lo que la rodea — usuarios, permisos, datos, almacenamiento y publicación — permanece dentro de la aplicación que ya ejecutas.

Si la pregunta es específicamente cómo montar el editor dentro de un producto existente, esa guía tiene su propia página. Creador de páginas embebible

Construye el editor alrededor de la arquitectura de tu aplicación existente en lugar de mover tu contenido a una plataforma alojada separada.

const editor = grapesjs.init({
  container: '#editor',

  // Each page is a row in your database, behind your own auth.
  storageManager: {
    type: 'remote',
    autosave: true,
    options: {
      remote: {
        urlStore: `/api/pages/${pageId}`,
        urlLoad: `/api/pages/${pageId}`,
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

// Publishing stays on your side — your domains, your CDN, your workflow.
async function publish() {
  await fetch(`/api/pages/${pageId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html: editor.getHtml(), css: editor.getCss() }),
  });
}

GJS.Market vende plugins; no aloja tu editor, no almacena tus páginas ni ejecuta tu base de datos. El Gestor de Almacenamiento apunta al punto final que le asignes, detrás de tu propia autenticación.

Un editor visual parece una sola función y resulta ser una docena de subsistemas, cada uno de los cuales tiene que funcionar antes de que cualquiera parezca terminado.

De qué está hecho un editor WYSIWYG

• Lienzo
• Selección
• Edición en línea
• Arrastrar y soltar
• Componentes
• Bloques
• Estilo
• Controles responsivos
• Activos
• Deshacer y rehacer
• Almacenamiento
• Exportación
• Publicación
• Mantenimiento

Esto es una comparación de alcance, no de calendario: cuánto tiempo tarda un editor en construir depende de tu equipo y de cuánto realmente necesites. Construye tu producto, no otro editor desde cero.

Un lienzo en blanco es lo más difícil de entregar a un usuario no técnico. Los diseños iniciales les dan algo que cambiar en lugar de algo que inventar.

Estos son los tipos de diseño que piden los usuarios de un constructor, no listados de productos. Los puntos de partida ya hechos se envían como presets en GJS.Market.

Todo lo que hay a continuación es una lista real en GJS.Market, con su nombre activo y precio. Cada grupo también enlaza su categoría, así que siempre hay más de lo que encaja aquí.

Edición de texto enriquecido

Editar el texto donde está es la mitad de WYSIWYG. Cambia el editor integrado por el que ya usa tu producto.

Explora esta categoría

RTE en línea

GrapesJS Inline Text Editor — Compatible with CKEditor 5

Sustituye el editor de texto enriquecido integrado por CKEditor 5, editando en el mismo lugar en el lienzo.

69,00 US$Vista

RTE en línea

TinyMCE 8 Inline Text Editor

Lleva TinyMCE 6 al lienzo para equipos ya estandarizados en él.

69,00 US$Vista

Barra de herramientas RTE

Grapesjs RTE Extensions

Extiende la barra de herramientas predeterminada con las acciones de formato que la original oye.

GratisVista

Estilismo visual

Dale al panel de estilos mejores controles: selectores de color, fuentes reales y espaciado preciso.

Explora esta categoría

Color

Grapesjs Style Gpickr

Un selector de color adecuado, incluyendo degradados, dentro del gestor de estilo.

GratisVista

Tipografía

Custom Fonts

Añade tus propias familias de fuentes a los controles de tipografía.

GratisVista

Espaciado

GrapesJS LayoutEnhancer: Precision Spacing Tool

Hace que el margen y el relleno sean ajustables arrastrando sobre el lienzo.

49,00 US$Vista

Bloques

Bloques visuales ya hechos para que el lienzo sea útil desde el primer día.

Explora esta categoría

Bloques

Plugin Basic Blocks

El set inicial de bloques: columnas, texto, imagen, vídeo, mapa.

GratisVista

Bloques

Plugin Blocky for Tailwind CSS

Secciones preconstruidas para equipos cuya producción debe ser Tailwind.

59,00 US$Vista

Componentes

Componentes editables especializados, incluyendo elementos reutilizados en muchas páginas.

Explora esta categoría

Reutilizable

Symbols

Define un elemento una vez y reutilízalo, así que una edición actualiza cada instancia.

GratisVista

Activos

Funcionalidad adicional de medios — subidas, alojamiento y edición de imágenes en el editor.

Explora esta categoría

Activos

Grapesjs Cloudinary

Señala al gestor de activos en Cloudinary para subidas y transformaciones.

GratisVista

Edición de imágenes

TOAST UI Image Editor

Recorta, rota y filtra imágenes sin salir del editor.

GratisVista

Plantillas

Puntos de partida preconstruidos para que los usuarios nunca se enfrenten a un lienzo vacío.

Explora esta categoría

Preset

Webpage Preset

Una configuración de página web lista para empezar un proyecto.

GratisVista

Plantillas

Templates Manager

Permite a los usuarios guardar y reabrir sus propias plantillas.

39,00 US$Vista

Almacenamiento

Un lugar donde poner los datos del proyecto que produce el editor.

Explora esta categoría

Almacenamiento

Grapesjs Firebase Storage

Persiste proyectos en Firebase cuando preferirías no construir el endpoint.

GratisVista

Páginas

Proyectos de varias páginas, para cuando un lienzo no es todo el sitio.

Explora esta categoría

Páginas

Pages Manager

Añade proyectos de varias páginas con una lista de páginas en el editor.

25,00 US$Vista

IA

Generación asistida por IA dentro del editor.

Explora esta categoría

IA

Grapesjs GPT Plugin

Genera contenido para el componente seleccionado a partir de un prompt.

GratisVista

Cuatro combinaciones iniciales, cada una dirigida a un tipo diferente de producto. Cada plugin listado es un anuncio real con su precio en vivo.

Los precios provienen directamente del catálogo y pueden cambiar; la página del producto es autoritaria.

El núcleo es un paquete npm y un elemento contenedor. Todo lo que viene después decide cuánto del editor deben ver tus usuarios.

import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// The visual canvas. Everything the user sees here is the page itself,
// not a preview of it.
const editor = grapesjs.init({
  container: '#editor',

  // The panels that make the editing visual rather than textual.
  styleManager: { appendTo: '#styles' },
  deviceManager: {
    devices: [
      { id: 'desktop', name: 'Desktop', width: '' },
      { id: 'tablet', name: 'Tablet', width: '768px' },
      { id: 'mobile', name: 'Mobile', width: '375px' },
    ],
  },
});

// "What you see is what you get" starts with editing text where it
// already sits. GrapesJS ships an inline rich-text editor, and you can
// replace it with whichever one your product already uses.
editor.setCustomRte({
  enable(el, rte) {
    el.contentEditable = true;
    return rte;
  },
  disable(el) {
    el.contentEditable = false;
  },
});

// A component decides what the user is allowed to change visually.
editor.DomComponents.addType('quote', {
  model: {
    defaults: {
      // Editable in place, but the frame around it stays yours.
      editable: true,
      droppable: false,
      traits: ['author', 'source'],
    },
  },
});

1. Añade los componentes que tu producto necesita
2. →Personaliza los estilos y la interfaz del editor
3. →Configura el almacenamiento contra tu propia API
4. →Conecta la publicación con tu pipeline
5. →Amplía con plugins donde te ahorren tiempo

Eso es toda la superficie: inicializar, extender, almacenar, publicar. La documentación abarca a cada responsable en profundidad.

El núcleo es independiente del framework; estas páginas cubren el montaje dentro de uno específico.

Empieza con una base de edición visual de código abierto y amplíala según los requisitos de tu producto.

Páginas contiguas para las preguntas que esta solo toca.

Empieza con GrapesJS, personaliza la experiencia de edición y añade los plugins que tu producto necesita.