GrapesJS en libertad
Usamos GrapesJS para alimentar nuestro CMS en http://saasquatch.com WidgetsGrapesJS gestiona la edición del contenido en nuestro widget javascript dentro de la aplicaciónHemos personalizado la mayoría de las barras de herramientas, eliminado la mayoría de los componentes predeterminados y la hemos formado solo por com...
Lee la respuesta completa abajo ↓Pregunta
Hola,
Quería ver algunos ejemplos de cómo la gente está usando GrapesJS y cómo pueden haberlo ampliado o personalizado según sus necesidades.
Sería genial que alguien con una web pública (supongo que incluso una captura de pantalla) comentara sobre este problema para hacer una lista de usos actuales de esta gran extensión.
Respuestas (3)
Usamos GrapesJS para alimentar nuestro CMS en http://saasquatch.com
Widgets
- GrapesJS gestiona la edición del contenido en nuestro widget javascript dentro de la aplicación
- Hemos personalizado la mayoría de las barras de herramientas, eliminado la mayoría de los componentes predeterminados y la hemos formado solo por componentes web personalizados
- https://cloudinary.com/ enchufadas para gestión de activos
- Funciona bastante bien con Web Components y https://stenciljs.com/ ❤️
- Recomendación: Usar GrapesJS con componentes web
Correos electrónicos
- También lo usamos para la edición de correos en HTML, pero descubrimos que no es muy bueno (porque los correos HTML son una pesadilla para acertar, no directamente un defecto de GrapesJS....) Estamos pensando en cambiar a GrapesJS + MJML o https://beefree.io/ para hacer la experiencia del usuario final más llevadera.
- Recomendación: Evita GrapesJS para plantillas de correo HTML simple
! imagen
Por fin ha publicado mi proyecto, así que puedo enseñarlo ahora: ! imagen ! imagen
Forma parte de nuestro editor de mapas de batalla de RPG de mesa DungeonFog y se usa para crear notas y libros de aventuras para los maestros de juego. La idea es que puedas imprimirlos a PDF desde el navegador, así que es un poco como un InDesign más sencillo.
Estamos actualizando a GrapesJS para nuestros diseñadores de Landing Page y Email en DailyStory.
Hicimos bastantes cambios, principalmente para desactivar o desactivar ciertas funcionalidades mientras también escribíamos todos los componentes nuevos desde cero para poder controlar la experiencia de edición (limitamos lo que puedes o no puedes hacer en el diseñador), por ejemplo, dónde se pueden colocar los bloques y componentes.
Y todos los componentes de la landing page están construidos alrededor de Bootstrap. Simplemente mantiene las cosas súper sencillas para nuestros clientes.
! imagen
Luego tuvimos que empezar desde cero y escribir otro conjunto de componentes/bloques desde cero para plantillas de correo electrónico con tablas, para que funcionaran de forma amigable para el correo electrónico mientras controlábamos lo que se podía o no hacer en el editor. Necesitábamos diferentes tipos de componentes para distintas situaciones, por ejemplo, una tabla de contenedores de diseño no editable o removible frente a una tabla de sección de contenido arrastrable.
! imagen
También integramos nuestro propio gestor de archivos.
! imagen
Vamos a lanzar nuestro editor de landing page a nuestros clientes en 2 semanas (todavía estamos dando los últimos retoques). Planeamos lanzar nuestras actualizaciones del editor de correo electrónico a finales de julio. Empezamos ambos proyectos hace unos 9 meses (trabajamos en ellos de forma intermitente). Luego compartiré algunas capturas de pantalla del editor de correo.
Gran proyecto @artf
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #991
Subir vídeo en el elemento imagen
Hola. Estaba intentando implementar la subida de vídeos usando el elemento Image con el gestor de assets, pero me detuve en el paso en el q...
Issue #3019
[PREGUNTA] - Vincular texto/html interno (como div, p, h1) a Trait
¡Hola! He creado un rasgo personalizado y quiero que me permitan cambiar el contenido de las etiquetas (en este caso es una etiqueta H1) ba...
Issue #871
[BUG] Opciones incorrectas de stylemanager la primera vez que se selecciona un componente/bloque
Hola, He notado el siguiente comportamiento con errores en el gestor de estilos:Usando una copia local de GrapesJS (ver 0.14.5). Probado en...
Issue #1427
Algunos párrafos no son malos y se pueden mantener flotables
Estoy probando el editor en una plantilla concreta con Boostrap 4 usando flex, pero me he dado cuenta de que algunos párrafos no muestran c...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.