Issue #855💬 RespondidoAbierto el 9 de febrero de 2018por kewilsonReacciones 2

No hay espacio con el botón nuevo en la ventana de exportación

Respuesta rápidapor ryandeba1

Hola @kewilson, Si he entendido bien tu problema, apuesto a que ajustar el margen izquierdo en vez del relleno izquierdo funcionaría mucho mejor... ¿Está esta captura de pantalla cercana a lo que intentas conseguir? Si es así, podrías reemplazar tu código 'button.style.paddingLeft = "30px"' por 'button.style.marginLef...

Lee la respuesta completa abajo ↓

Pregunta

He implementado un nuevo plugin que añade otro botón en la ventana de exportación, y funciona bien. Sin embargo, cuando aparece la página, no hay espacio entre ella y el botón existente de "Exportar ZIP".

¿Cómo podría añadir un espacio al estilo de Grapesjs? ¿Es solo averiguar qué propiedades de los elementos del dom HTML ajustar? .. por ejemplo, https://www.w3schools.com/jsref/dom_obj_all.asp

Respuestas (3)

ryandeba10 de febrero de 2018

Hola @kewilson,

Si he entendido bien tu problema, apuesto a que ajustar el margen izquierdo en vez del relleno izquierdo funcionaría mucho mejor... ¿Está esta captura de pantalla cercana a lo que intentas conseguir? Si es así, podrías reemplazar tu código 'button.style.paddingLeft = "30px"' por 'button.style.marginLeft = "10px"'. O podrías hacer esto en css (crear un archivo css personalizado y cargarlo justo después de grapes.min.css): '.gjs-mdl-content .gjs-btn-prim + .gjs-btn-prim { margin-left: 10px; }`

ryandeba10 de febrero de 2018

Hola @kewilson,

Esto es un poco difícil de manejar sin un ejemplo de código en vivo (como una demo de jsfiddle), pero estoy viendo algunos problemas:

  • 'botones let = editor. Modal.getElementsByTagName("button") || {};`
    • Probablemente esto esté generando un error porque 'editor. Modal' no es un elemento dominante, por lo que 'getElementsByTagName' no es un método válido. 'Editor. Modal.getContentEl().getElementsByTagName("button")' debería funcionar.
    • Poner por defecto un objeto vacío aquí no tiene mucho sentido.
  • 'para (b en botones)'
    • No estoy muy familiarizado con cómo trabajar con el objeto 'HTMLCollection' devuelto por getElementsByTagName, pero sospecho que iterar sobre él así podría no ser válido. Te recomendaría cambiar esto a 'querySelectorAll', ya que así devolverá un array (o al menos un objeto iterable que se parezca mucho a un array).

Algo así podría funcionar:

botones let = editor. Modal.getContentEl().querySelectorAll("button");

buttons.forEach(function(node) {
  node.style.border = "3px negro sólido";
});
kewilson9 de febrero de 2018

vale, así que button.style.paddingLeft = "30px"; Funciona, pero he notado que la zona del borde donde están los botones no distingue entre ambos... es decir, no hay borde de botón alrededor del texto de cada botón. Como el botón Exportar ZIP no está bajo nuestro control, ¿cómo podríamos añadir un borde de botón alrededor de él y, posteriormente, el nuestro...? Por ejemplo, con esquinas redondeadas, etc.

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.