Issue #2654✓ ResueltoAbierto el 15 de marzo de 2020por AbdiasMReacciones 6

Cómo obtener la propiedad modificada desde StyleManager

Respuesta rápidapor pouyamiralayi3

@AbdiasM creo que esto es algo relacionado con la base y, que yo sepa, actualmente no es posible. Así es como debería ser: ¡Salud!

Lee la respuesta completa abajo ↓

Pregunta

Hola,

¿Hay alguna forma de saber qué propiedad se modificó en el StyleManager? Por ejemplo, Si selecciono un componente de texto y cambio su propiedad de color de fondo desde el StyleManager, ¿hay algún evento donde pueda obtener la propiedad que se ha cambiado? He probado el evento 'component:styleUpdate', pero pasa el modelo del componente como argumento, no como propiedad.

Cualquier ayuda es bienvenida.

Respuestas (3)

👍 Muy útilpouyamiralayi18 de marzo de 2020

@AbdiasM creo que esto es algo relacionado con la base y, que yo sepa, actualmente no es posible. Así es como debería ser:

editor.on('component:styleUpdate', component => {
        console.log(Object.keys(component.changedAttributes()))
})

¡Salud!

artf19 de marzo de 2020

De hecho, obtienes la propiedad modificada como segundo argumento de la llamada de regreso '''js editor.on('component:styleUpdate', (component, propChanged) => { ... })

pouyamiralayi16 de marzo de 2020

Hola @AbdiasM basándote en component:styleUpdate o component:styleUpdate:{propertyName} puedes obtener la propiedad como la siguiente:

editor.on('component:styleUpdate:background-image', component => {
    const sm = editor. StyleManager
    const model = sm.getModelToStyle(component)
    el modelo puede ser un Componente o una CssRule
    const bg = model.getStyle()['imagen-fondo']
    //...

¡Salud!

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.