Cómo actualizar estilos en el Gestor de estilos
He notado que, en general, cuando actualizas estilos para un 'componente' mediante código, no aparecen en el 'Gestor de Estilos' hasta que desseleccionas y vuelves a seleccionar el 'componente', y no encuentro nada en la documentación sobre actualizar el 'Gestor de Estilos'. Como solución alternativa que puedes utiliz...
Lee la respuesta completa abajo ↓Pregunta
Hola. Creé un componente personalizado donde configuré imagen de fondo mediante un gestor de recursos personalizado Código de bloque personalizado: '''javascript domc.addType('image-block', { extender: 'por defecto', modelo: { defaults() { return { nombre: 'Imagen de fondo', Tipo: 'Bloque de imagen', etiquetaNombre: 'div', nulo: falso, Droppable: Cierto, }; }, }, Vista: { init() { this.listenTo(this.model, 'change:src', this.updateImage); }, eventos: { dblclick: 'onActive', }, onActive() { editor.runCommand('open-assets'); }, updateImage(model, url) { si (url) { const style = model.getStyle();
model.setStyle({ 'imagen de fondo': estilo['color-fondo'] || 'url("${url}")', 'tamaño de fondo': estilo['tamaño de fondo'] || 'tapadera', 'posición de fondo': estilo['posición-fondo'] || 'centro central', 'repetición de fondo': estilo['repetición de fondo'] || 'no-repeat', 'Altura-min': estilo['altura-min'] || '200px', }); } }, }, isComponent(el) { if (el.dataset && el.dataset.type === 'image-block') { return { type: 'image-block' }; } }, });
Comando que ejecuto para establecer una nueva imagen:
'''javascript
cmd.add('set-image-url', {
run(editor, sender, { url }) {
objetivo const = editor.getSelected();
target.set('src', url);
},
});
Funciona bien, conjuntos de imágenes. Pero la propiedad de fondo en el Administrador de estilos no se actualiza después de establecer la imagen.
¿Cómo puedo actualizar la propiedad de antecedentes en el gestor de estilos?
Respuestas (3)
He notado que, en general, cuando actualizas estilos para un 'componente' mediante código, no aparecen en el 'Gestor de Estilos' hasta que desseleccionas y vuelves a seleccionar el 'componente', y no encuentro nada en la documentación sobre actualizar el 'Gestor de Estilos'.
Como solución alternativa que puedes utilizar: '''js editor.selectToggle(model); editor.select(modelo);
>En tu caso
'''js
domc.addType('image-block', {
//...
Vista: {
//...
updateImage(model, url) {
si (url) {
const style = model.getStyle();
model.setStyle({
'imagen de fondo': estilo['color-fondo'] || 'url("${url}")',
'tamaño de fondo': estilo['tamaño de fondo'] || 'tapadera',
'posición de fondo':
estilo['posición-fondo'] || 'centro central',
'repetición de fondo': estilo['repetición de fondo'] || 'no-repeat',
'Altura-min': estilo['altura-min'] || '200px',
});
editor.selectToggle(model);
editor.select(modelo);
}
},
},
//...
});
@Ju99ernaut no
Consulta aquí por qué querrías usar un analizador CSS personalizado si vas a configurar algunos estilos fuera del 'Gestor de Estilos'
Aquí usan el #2728: '''js component.addStyle({ 'image-background': 'url('${url}')' })
Supongo que esa imagen de fondo no se actualiza porque el atributo 'src' está activado en lugar de la propiedad de estilo 'imagen de fondo'.
@Ju99ernaut gracias por el consejo, pero por desgracia no funcionó. También he notado que propiedades como el tamaño de fondo o la repetición en segundo plano tampoco se reflejan correctamente en el Administrador de Estilos, aunque está configurado para un componente seleccionado.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2697
[PREGUNTA] Problema con el tipo de componente personalizado y la celda de la tabla
¡Hola! Estoy intentando añadir un tipo de componente personalizado: '''javascript domc.addType('image-block', { extender: 'celda', modelo:...
Issue #2696
[PREGUNTA]: ¿Cómo puedo crear bloque con imagen de fondo con un comportamiento similar a una "imagen" incorporada?
Hola, estoy intentando crear un bloque con imagen de fondo (similar a Grapedrop Image Box). He añadido un componente nuevo así: '''javascri...
Issue #1241
[Pregunta]: el nuevo estilo no se refleja en el panel
Hola, En mi proyecto he sustituido el AssetManager por el mío. Sin embargo, cuando uso el nuevo gestor para actualizar la imagen de fondo d...
Issue #1959
[Pregunta] Editar innerHTML en un botón personalizado
Hola a todos, Estoy intentando cambiar el texto en un componente de botón, pero no consigo editarlo. He añadido este tipo: Incluí el paráme...
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.