Capas de imagen de fondo
Gracias @xamdam777 por el informe. De hecho, como ya has indicado, esto ocurre cuando importas el estilo (y los analizadores CSS del navegador son bastante desordenados), y desafortunadamente, en pocos casos, ocurren conflictos. (por ejemplo, Chrome genera un estilo que ni siquiera él mismo entiende) ! schermata 2018-...
Lee la respuesta completa abajo ↓Pregunta
Error: cuando tu bloque predefinido o plantillas guardadas tienen dos o más capas de fondo, si añades una nueva capa, se crean muchas capas vacías nuevas.
Cómo reproducirlo:
- Ir a https://grapesjs.com/demo.html
- Selecciona el bloque rosa de cabecera
- Ve a Decoraciones -> fondo y añade una nueva capa
- Desmarca el encabezado rosa y seleccionarlo de nuevo
- Ve a Decoraciones -> fondo, verás nuevas capas vacías
- Si repites el ciclo anterior, obtendrás cientos de capas vacías.
Vídeo de 30 segundos mostrando el problema: https://screencast-o-matic.com/watch/cFQVb0q4Ex
Ocurre en Chrome, Safari y Firefox, las últimas versiones.
@artf puedes darme alguna pista de dónde se controla la adición de nuevas capas de fondo en grapesjs? Me gustaría intentar arreglarlo yo mismo. ¡Gracias!
Respuestas (2)
Gracias @xamdam777 por el informe. De hecho, como ya has indicado, esto ocurre cuando importas el estilo (y los analizadores CSS del navegador son bastante desordenados), y desafortunadamente, en pocos casos, ocurren conflictos. (por ejemplo, Chrome genera un estilo que ni siquiera él mismo entiende) ! schermata 2018-09-02 alle 21 10 25
Lo extraño ocurre aquí cuando añades una nueva capa ! schermata 2018-09-02 alle 21 15 01 Como ves, 'repetición en fondo' y 'posición en fondo' contienen más de 3 valores esperados (por alguna razón tienen 5). Por cierto, si quieres arreglarlo, probablemente puedas empezar desde la función que añade una nueva capa https://github.com/artf/grapesjs/blob/dev/src/style_manager/view/PropertyStackView.js#L69
¡Muchas gracias, @artf, ahora entiendo perfectamente el problema, malditos parsers del navegador! :)
He estado haciendo algunas pruebas en addLayer() y refreshLayers().
Este es mi enfoque actual, modificando la función de actualizarLayers(), intento detectar las capas incorrectas y no las muestro.
Coloqué el código abajo en la línea 131 de https://github.com/artf/grapesjs/blob/dev/src/style_manager/view/PropertyStackView.js#L69 (cerca del final de la función refreshLayers)
Parece funcionar bien con muchas muestras con fallos (nunca muestra capas con fallos), pero como realmente no elimina el código incorrecto (el CSS incorrecto sigue ahí), me pregunto si esta es una mala solución.
var arrayWrongLayers = nuevo array;
var myLayersArray = layersObj;
var arrayLength = myLayersArray.length;
para (var i = 0; i < arrayLength; i++) {
console.log(myLayersArray[i]);
var imagevalue= myLayersArray[i].properties[0].value;
if(( imagevalue.toLowerCase().indexOf('.png') >= 0)||( imagevalue.toLowerCase().indexOf('.jpg') >= 0)||( imagevalue.toLowerCase().indexOf('.gif') >= 0)||( imagevalue.toLowerCase().indexOf('.jpeg') >= 0)||( imagevalue.toLowerCase().indexOf('.svg') >= 0)){
console.log("Es imagen");
} else {
console.log("NO es imagen");
arrayWrongLayers.push(i);
}
}
console.log("las capas equivocadas son" + arrayErrorLayers);
var arrayWrongLayersLength = arrayWrongLayers.length;
for (var i = 0; i < arrayWrongLayersLength; i++) {
console.log(arrayWrongLayers[i]);
Elimina la última capa de la pila antes de renderizarlos en el gestor de estilos
Mejor borrar la capa por index, pero he encontrado problemas al hacerlo y pop() también funciona
layersObj.pop();
}
¿Quizá podríamos realmente eliminar la capa del modelo usando este enfoque?
¡Gracias de nuevo!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1563
[Bug] Problema con el rasgo - Cambiar el proveedor de vídeo
Versión: 0.14.40 Bug: Cuando cambias el campo "Proveedor" -> todos los ajustes desaparecidos. Ocurre en Chrome, Safari y Firefox, las últim...
Issue #4448
Error al redimensionar la imagen.
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Navegador Brave Última versión Enlace de...
Issue #4195
El texto desaparece si se pega una segunda vez en el bloque de texto
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome 99 Enlace de demo reproducible htt...
Issue #3579
RTE se pierde al abrirse justo después de soltar el componente 'activeOnRender'
Versión: 0.17.4 ¿Puedes reproducir el error de la demo?[x] Sí[ ] No Pasos para reproducir:Ir a la demoColocar un bloque de "Texto" dentro d...
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
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.