La clase de un bloque no siempre aparece en la sección de clases
No se puede reproducir, solo hay que proporcionar una demo en vivo (como sugiero en la plantilla del problema) con ese bloque
Lee la respuesta completa abajo ↓Pregunta
Hola a todos,
He añadido muchos bloques personalizados y he dado la misma clase CSS a todas las imágenes de esos bloques. Llamémoslo por ahora 'clase imagen'. Cuando arrastro y suelto 2 de esos bloques y selecciono 1 imagen en uno de ellos, la clase 'image-class' no aparece al primer clic en la sección de clases del panel de la derecha. Solo aparece cuando el usuario hace clic en una segunda imagen.
Puedes ver en la imagen de abajo que, si el usuario arrastra y suelta un bloque de 'Elementos de la cuadrícula' y selecciona 1 imagen, la clase 'imagen-elemento de la cuadrícula' puede verse en la sección de clases del panel (arriba a la derecha) <img width="1277" alt="captura de pantalla 2018-08-16 a las 6:00 49 pm" src="https://user-images.githubusercontent.com/28840780/44217144-745d7300-a17f-11e8-9e0d-ffa35d17244f.png"> Ese es el comportamiento que intento describir.
El hecho de que la clase no siempre aparezca en la primera selección de imagen me está causando un problema, porque si el usuario modifica el relleno por ejemplo, estará modificando el relleno de toda la clase, así que todas las imágenes se verán afectadas, lo cual resulta confuso para el usuario, porque la clase 'image-class' no está para desmarcarla y modificar solo la imagen seleccionada y no todos los bloques con la clase 'image-class'.
Respuestas (3)
No se puede reproducir, solo hay que proporcionar una demo en vivo (como sugiero en la plantilla del problema) con ese bloque
Voy a compartir contigo algunas capturas de pantalla que seguramente aclararán este problema:
- Paso 1: Arrastra y solta un bloque en el lienzo y seleccionarlo haciendo clic en él <img width="642" alt="captura de pantalla 2018-08-21 a las 10:16 29 am" src="https://user-images.githubusercontent.com/28840780/44386545-7599f180-a52b-11e8-99ba-1a2c7e3dca9e.png">
Puedes ver que el id no muestra dónde debería
- Paso 2: Desseleccionar el bloque haciendo clic en cualquier otro lugar y luego seleccionarlo de nuevo <img width="1278" alt="captura de pantalla 2018-08-21 a las 10:16:44 am" src="https://user-images.githubusercontent.com/28840780/44386586-94988380-a52b-11e8-8332-0988e178c763.png">
Ahora puedes ver el id
¿Alguna idea de cómo deberíamos hacer que el id y las clases siempre aparezcan y no necesiten un segundo clic para aparecer?
Otra pregunta es, ¿cómo puedo añadir otras cosas así? así que digamos que quiero añadir bajo el 'selected' algo como tagname, para mostrar el tagname del componente seleccionado; En otras palabras, quiero que cada vez que el usuario haga clic en un bloque, vea el nombre de la etiqueta entre las clases y el id. ¿Hay alguna forma de implementar esto?
Gracias
Entiendo cuál es tu problema, pero aun así, tienes que subir una demo en directo porque no puedo reproducirla. Puede depender de muchas cosas, solo capturas de pantalla no son suficientes. Ni siquiera estoy seguro de que estés usando la última versión, así que actualízala por favor...
Otra pregunta es, ¿cómo puedo añadir otras cosas así? así que digamos que quiero añadir bajo el 'selected' algo como tagname, para mostrar el tagname del componente seleccionado; En otras palabras, quiero que cada vez que el usuario haga clic en un bloque, vea el nombre de la etiqueta entre las clases y el id. ¿Hay alguna forma de implementar esto?
Puedes confiar en esto: '''js editor.on('component:selected', component => { someSelectedEl.innerHTML = component.get('tagName'); ... })
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1696
Los rasgos aparecen a la primera vez cuando arrastras un componente personalizado
Hola artf, he creado un componente personalizado y le he añadido rasgos; al arrastrar este componente al editor y seleccionarlo, los rasgos...
Issue #1468
[bug] modaltitle sin efecto
Hola, No puedo traducir el título de gestor de activos al francés. Ejemplo: assetManager: { Tipo de almacenamiento: '', storeOnChange: cier...
Issue #1906
Componentes y Js - Plantilla de carga
Hola, Tengo un componente al que se le conecta un JS. Todo se crea usando el JS. Cuando arrastro y suelto mi bloque por primera vez, el JS...
Issue #1493
[PREGUNTA] render() funciona a la primera, pero no en las llamadas posteriores
Hola, He creado un componente personalizado que muestra imágenes usando 'imagen de fondo' en un '<div>' en lugar de usar un <img>elemento '...
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.