GrapesJS moviendo fichas de Bigote
@MiseryMachine has probado a envolver los internos de tu mesa dentro de un ''tbody'' en tu definición de bloque? ¿O al menos mover tus fichas de bigote dentro de una etiqueta?
Lee la respuesta completa abajo ↓Pregunta
Hola, Estoy trabajando con GrapesJS para permitir que los usuarios creen plantillas de informes. Me he encontrado con un problema con un bloque que crea una tabla, pero las filas de la tabla están determinadas por fichas de Bigote. Sin embargo, al renderizarse, las fichas se mueven fuera del elemento de la tabla. Creo que el estilo de tabla o fila de tabla no permite la existencia de estos tokens dentro de la estructura de elementos de la tabla.
Mi bloqueo: '''javascript bm.add('product-list-block', { etiqueta: 'Lista de productos', atributos: { Clase: 'FA FA-Header' }, categoría: 'Productos', Contenido: ' <div> <table data-gjs-type="product-list-type" style="width: 100%; margin: 10px 15px;"> <tr style="height: 24px; background: #72a1c3"> <th style="width: 15%">Image</th> <th>Detalles</th> </tr> {{#bomGroupProducts}} <tr> <td style="width: 15%">{{productImageUrl}}</td> <td> <div style="font-weight: bold">{{productName}}</div> <div>{{productDescription}}</div> <div>SKU: {{productSku}}</div> </td> </tr> {{/bomGroupProducts}} </table> '</div> });
El tipo de lista de productos:
'''javascript
domc.addType('product-list-type', {
extiende: 'mesa',
model: tableModel.extend({
Predeterminados: {
... defaultModel.prototype.defaults,
Props por defecto
Arrastrable: Cierto,
Droppable: Cierto,
atributos: {
título: productoListaTítulo,
Estilo: 'Color: Rojo; Peso-fuente: negrita;'
}
}
}),
isComponent: el => {
console.log(el);
console.log(el.tagName + '[título=' + el.título + ']');
if (el.tagName === 'th' && el.getAttribute('data-gjs-type') === 'producto-list-type') {
return {
Tipo: 'Tipo de lista de productos'
};
}
regresar '';
}
});
Cuando dejo caer el elemento sobre el lienzo, los tokens {{#bomGroupProducts}} y {{/bomGroupProducts}} se mueven por encima de toda la mesa. '''html
<div style="box-sizing: border-box;"> {{#bomGroupProducts}} {{/bomGroupProducts}} <título de la tabla="productoTítuloLista" id="i0x6" estilo="tamaño de caja: cuadro de borde; ancho: 100%; margen: 10px 15px;" ancho="100%"> <thead style="box-sizing: border-box;"> <tr id="icuj" style="cuadro-dimensionamiento: cuadro de borde; altura: 24px; fondo: #72a1c3;"> <th id="izmb" style="box-ssizeing: border-box; width: 15%;">Image </th> <th style="cuadro-tamaño: border-box;">Detalles </th> </tr> </thead> <tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"> <td id="idbqf" style="box-sizing: border-box; width: 15%;" width="15%">{{productImageUrl}} </td> <td style="cuadro-tamaño: caja de borde;"> <div id="iwb35" style="box-sizing: border-box; font-weight: bold;">{{productName}} </div> <div style="box-sizing: border-box;">{{productDescription}} </div> <div style="box-sizing: border-box;">SKU: {{productSku}} </div> </td> </tr> </tbody> </table> </div> ```Necesito esos tokens alrededor de los <tr> elementos, para que el generador de Bigotes cree filas para cada producto según sea necesario. ¿Hay alguna forma en el estilo/componente de evitar esto?
Gracias de inmediato, Randy
Respuestas (3)
@MiseryMachine has probado a envolver los internos de tu mesa dentro de un ''tbody'' en tu definición de bloque? ¿O al menos mover tus fichas de bigote dentro de una etiqueta?
Gracias por tu sugerencia. He probado eso y con el mismo resultado, desafortunadamente.
Script de bloque: '''javascript bm.add('product-list-block', { etiqueta: 'Lista de productos', atributos: { Clase: 'FA FA-Header' }, categoría: 'Productos', Contenido: ' <div> <table data-gjs-type="product-list-type" style="width: 100%; margin: 10px 15px;"> <tr style="height: 24px; background: #72a1c3"> <th style="width: 15%">Image</th> <th>Detalles</th> </tr> <tbody data-gjs-type="product-list-body-type"> {{#bomGroupProducts}} <tr> <td style="width: 15%">{{productImageUrl}}</td> <td> <div style="font-weight: bold">{{productName}}</div> <div>{{productDescription}}</div> <div>SKU: {{productSku}}</div> </td> </tr> {{/bomGroupProducts}} </tbody> </table> '</div> });
Salida:
'''html
<div style="box-sizing: border-box;">
{{#bomGroupProducts}}
{{/bomGroupProducts}}
<título de la tabla="productoTítuloLista" id="ip2d" estilo="tamaño de caja: cuadro de borde; ancho: 100%; margen: 10px 15px;" ancho="100%">
<tbody style="box-sizing: border-box;">
<tr id="i5t5" estilo="tamaño de caja: cuadro de borde; altura: 24px; fondo: #72a1c3;">
<th id="iqme" style="box-ssizeing: border-box; width: 15%;">Image
</th>
<th style="cuadro-tamaño: border-box;">Detalles
</th>
</tr>
</tbody>
<tbody style="box-sizing: border-box;">
<tr style="box-sizing: border-box;">
<td id="i8w2m" style="box-sizing: border-box; width: 15%;" width="15%">{{productImageUrl}}
</td>
<td style="cuadro-tamaño: caja de borde;">
<div id="ir6u9" style="box-sizing: border-box; font-weight: bold;">{{productName}}
</div>
<div style="box-sizing: border-box;">{{productDescription}}
</div>
<div style="box-sizing: border-box;">SKU: {{productSku}}
</div>
</td>
</tr>
</tbody>
</table>
</div>
Quizá sea porque GrapesJS, por defecto, impone la estructura HTML. Aun así, sigo intentando aclararlo.
No, no puedes hacer eso porque en ese caso tienes un HTML inválido, así que el analizador HTML lo mueve. Tienes que crear un contenido HTML válido para que el navegador lo muestre correctamente: '''html
<tr> <td> {{#bomGroupProducts}} <table> ... <tr> <td style="width: 15%">{{productImageUrl}}</td> <td> <div style="font-weight: bold">{{productName}}</div> <div>{{productDescription}}</div> <div>SKU: {{productSku}}</div> </td> </tr> ... </table> {{/bomGroupProducts}} </td> </tr> ```Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3337
Pregunta: Usa las flechas para mover bloques en el lienzo configurado en modo de posicionamiento absoluto
Hola, estoy creando una solución para que los estudiantes cuenten sus experiencias en el instituto como diapositivas hechas desde el editor...
Issue #2805
[PREGUNTA] "Los cambios que hayas hecho pueden no guardarse." Se muestra una ventana emergente de alerta
Hola a todos Tengo un problema relacionado con Alert que aparecía cuando intentaba cerrar sesión en la página. En realidad no sé si es un b...
Issue #2787
[PREGUNTA] Sustituir todo HTML
Hola, Estoy intentando usar GrapesJS para personalizar plantillas para mis usuarios finales, pero me encontré con el siguiente problema: No...
Issue #1895
[PREGUNTA] Arrastra el componente sobre el lienzo con script, script añadido varias veces.
Hola, no estoy seguro de si esto es un error o no. Pero he notado un comportamiento extraño: cuando arrastro un bloque que tiene un compone...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.