Issue #2777✓ ResueltoAbierto el 14 de mayo de 2020por kuhelbeherReacciones 2

Cómo actualizar estilos en el Gestor de estilos

Respuesta rápidapor Ju99ernaut2

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)

👍 Muy útilJu99ernaut18 de mayo de 2020

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'

Ju99ernaut14 de mayo de 2020

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'.
kuhelbeher15 de mayo de 2020

@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.

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 →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.