Issue #2381💬 RespondidoAbierto el 6 de noviembre de 2019por ColinTenaguilloReacciones 3

¿Es posible añadir información modal en el editor?

Respuesta rápidapor artf1

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)

artf7 de noviembre de 2019

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...

ColinTenaguillo7 de noviembre de 2019

Esto es lo que he hecho hoy con algunas modificaciones:

! ezgif-3-c8ae3aaa7dc0

Ahora es el aspecto que quería, solo necesito encontrar la manera de poner el contenido que quiero en modal

ColinTenaguillo14 de noviembre de 2019

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.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.