Cómo aplicar estilo o rasgo al elemento padre o hijo del componente seleccionado
@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.
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)
@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!
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!
@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.
Issue #1560
Aplica cambios en el estilo de mager a una clase
Hola @artf, he notado que cuando uso el gestor de estilos aplica el estilo a toda la clase del componente seleccionado Por ejemplo, si teng...
Issue #3392
HAZAÑA: Permitir una configuración dinámica droppable usando una función
Tengo un requisito que me permite usar selectores para determinar si un elemento es soltable. Por ejemplo: ! imagen El componente "hijo" de...
Issue #3251
¿Cómo puedo especificar la posición del elemento que se cae?
Quiero especificar la posición del elemento arrastrado. por ejemplo, si tengo un bloque de cabecera que, no importa dónde arrastres, deberí...
Issue #1889
Cómo añadir un componente hijo en la posición/índice requerido
Por ejemplo, Tengo un componente padre y este componente padre tiene 4 componentes hijos. Aquí, con la funcionalidad de rasgos, quiero move...
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
Preset DevFuture 2.0 — New Update Released
Preset continues evolving as a clean, production-ready starting point for building visual editors powered by GrapesJS
Tutorial
How Much Can You Earn on GJS.Market in a Month?
Discover how DevFuture earns €2,000+ monthly on GJS.Market — and learn how you can start building and selling your own GrapesJS plugins.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.