¿Es posible añadir información modal en el editor?
Actualmente, no hay documentación sobre cómo extender/actualizar propiedades del gestor de estilos (acabo de descubrir que algunos plugins como grapesjs-style-filter y grapesjs-style-gradient, pero no es suficiente) y, siendo sincero, lo que he hecho hasta ahora (como API pública) no es tan sólido, no me gusta. Me gus...
Lee la respuesta completa abajo ↓Pregunta
Hola,
Me gustaría añadir en el editor de grapejs un signo de interrogación clickable donde podamos hacer clic para poder dar información sobre qué hace esta especificación específica al usuario.
! imagen
Abriría un modal con toda la información que pudiéramos dar al añadir la propiedad a un sector. Como haces en la demo de la página web.
! imagen
Respuestas (3)
Actualmente, no hay documentación sobre cómo extender/actualizar propiedades del gestor de estilos (acabo de descubrir que algunos plugins como grapesjs-style-filter y grapesjs-style-gradient, pero no es suficiente) y, siendo sincero, lo que he hecho hasta ahora (como API pública) no es tan sólido, no me gusta. Me gustaría llegar al mismo resultado de personalizar rasgos, pero tenemos que esperar antes de llegar a este cambio...
Esto es lo que he hecho hoy con algunas modificaciones:
Ahora es el aspecto que quería, solo necesito encontrar la manera de poner el contenido que quiero en modal
Oye, ¿cómo puedo publicar mi rama con mi modificación para una pull request?
'''js export default Backbone.View.extend({ template(modelo) { const pfx = this.pfx; volver ' <div class="${pfx}label"> ${this.templateLabel(model)} </div> <div class="${this.ppfx}fields"> ${this.templateInput(model)} </div> ${this.templateModal(model)} `; },
templateLabel(model) { const { pfx } = esto; const icon = model.get("icon") || ""; const info = model.get("info") || ""; nombre const = model.get("nombre"); const description = model.get("description"); const parent = model.parent; volver ' <span class="${pfx}icon ${icon}" title="${info}"> ${nombre} </span> ${!padre ? '<b clase="${pfx}clear" ${clearProp}>⨯</b>' : ""} ${ ¡Descripción !== indefinido ? '<span class="trigger ${this.ppfx}pn-btn fa fa-question-circle" data-show-info title="${name}"> </span>' : "" } `; },
templateModal(model) { nombre const = model.get("nombre"); const description = model.get("description"); const pfx = "gjs-mdl2-";
volver ' <div class="${pfx}container"> <div class="${pfx}dialog gjs-one-bg gjs-two-color"> <div class="${pfx}header"> <div class="${pfx}title">${name}</div> <span class="${pfx}btn-close" data-close-info>⨯</span> </div> <div class="${pfx}content"> <div id="${pfx}c">${description}</div> <div style="clear:both"></div> </div> </div> </div> `; }
Esto es un cambio de PropetyView que he hecho
También he añadido CSS para estos modales específicos según el CSS del modal que utilices
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3193
LOGRO: Cambio del almacenamiento interno actual de objetos para permitir mapeos de relaciones en lugar de la implementación actual de contenedor indexable
¿Qué intentas añadir a GrapesJS? Actualmente, las instancias de editor recién instanciadas se añaden a una colección indexable donde el usu...
Issue #1567
Error en la barra de herramientas RTE
Hola a todos, Estoy usando la última versión estable de grapesjs (40) y he notado el siguiente error en el editor de texto enriquecido: si...
Issue #1393
[Pregunta] ¿Añadir el selector de color de grapesjs a un nuevo tipo de rasgo?
Estoy creando un nuevo tipo de rasgo y me gustaría poder incluir el selector de color de Grapesjs dentro de él; ¿alguna sugerencia sobre có...
Issue #3496
HAZAÑA: Marcar el componente como Sucio
¿Qué intentas añadir a GrapesJS? El componente debería poder marcarse como sucio, activando el mensaje de advertencia 'onbeforeunload'. Des...
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
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.