No hay espacio con el botón nuevo en la ventana de exportación
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)
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; }`
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";
});
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.
Issue #812
Layers Manager no funciona con varios editores
¡Hola de nuevo! Como comenté en una pregunta anterior, estamos trabajando con varios editores en la misma ventana. El problema que tenemos...
Issue #1720
[PREGUNTA] Cómo añadir el botón en rasgos personalizados
Hola, intento añadir un botón a mis rasgos personalizados para mis bloques personalizados pero no funciona bien como esperaba y También hay...
Issue #1288
No se puede leer la propiedad 'cuerpo' de nulo - Angular
Hola, Tengo una lista de plantillas de correo electrónico (página 'plantillas') y hay un botón que abre la edición (página 'templates/edit/...
Issue #2008
[Pregunta]El lienzo se vuelve oscuro e inmodificable al añadir un gran fragmento de html personalizado.
Solía añadir html personalizado con 'editor.addComponent()'. Funciona bien la mayor parte del tiempo, pero cuando intento insertar un gran...
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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.