Issue #2461💬 RespondidoAbierto el 20 de diciembre de 2019por obrazkowReacciones 2

Cómo aplicar estilo o rasgo al elemento padre o hijo del componente seleccionado

Respuesta rápidapor pouyamiralayi1

@obrazkow Puedes acceder al padre así: 'component.parent();' y para los hijos: 'const collection = component.components();'Además, tengo un problema enorme con el Trait, no puedo actualizar el SRC para IMG. ¡Salud!

Lee la respuesta completa abajo ↓

Pregunta

Por ejemplo, tengo una imagen componente que se envuelve en div.

Fragmento de códigoTEXT
Quiero estilizar la imagen con múltiples propiedades (posición horizontal, radio de borde, etc.)
Al actualizar la posición horizontal, es necesario actualizar el elemento actual - div
Cuando se actualiza el radio de borde, hay que actualizar el elemento hijo - en mi opinión.
Además, tengo un problema enorme con el rasgo, no puedo actualizar el SRC para IMG.
Añadí listener en Trait y al cambiar aplico valor en IMG, luego div e img tenían src juntos, pero es una mala solución.
`
Export default (editor) => {
    editor. TraitManager.addType('image', {
        onEvent({ elInput, component, event }) {
            component.view.el.querySelector('img').src = elInput.value
        },
    });
}
`
 ¿Puedes aconsejarme una solución?

Respuestas (3)

pouyamiralayi21 de diciembre de 2019

@obrazkow Puedes acceder al padre así: 'component.parent();' y para los hijos: 'const collection = component.components();'

Además, tengo un problema enorme con el Trait, no puedo actualizar el SRC para IMG.

 editor. DomComponents.addType('image', {
            modelo: {
                Predeterminados: {
                    Rasgos: ['SRC']
                }
            }
        })

¡Salud!

pouyamiralayi21 de diciembre de 2019

Con tu rasgo de solución no conozco el valor src y la entrada estará vacía en la fase de edición inicial.

¡No entiendo de qué hablas!

¿Qué opinas de mi solución con el objetivo de sobreescritura en el método init?

Estás tratando un caso de uso muy sencillo con una solución avanzada, y personalmente no recomiendo definir un rasgo personalizado para un caso así. ¡Salud!

obrazkow21 de diciembre de 2019

@pouyamiralayi eso es exactamente lo que hice, pero con esa solución los componentes seleccionados tienen atributos o estilos que solo necesitan un componente hijo.

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.