Issue #2433💬 RespondidoAbierto el 29 de noviembre de 2019por DavidvlvReacciones 0

Cambiar el layerable en un evento en tiempo de ejecución no se actualiza inmediatamente

Respuesta rápidapor Davidvlv

Lo mismo ocurre cuando intento añadir o eliminar un botón de barra de herramientas en un evento: la barra de herramientas no se actualiza hasta que desselecciono el componente y lo vuelvo a seleccionar:

Lee la respuesta completa abajo ↓

Pregunta

Cuando cambio la opción de capas de un componente personalizado en un evento, sigue apareciendo en las capas hasta que lo arrastras una vez. ¿Hay alguna forma de evitar esto forzando la actualización de las capas? ¿O podemos conseguir una solución de error para esto? Gracias.

importar uvas de 'uvas';
importar 'grapesjs-blocks-basic';

const editor = grapesjs.init({
  Contenedor: '#gjs',
  fromElement: 1,
  storageManager: { type: 0 },
  Plugins: ['GJS-Bloques-Básico']
});

VAR Comps = Editor. DomComponents;

var defaultType = comps.getType('default');
var defaultModel = defaultType.model;

comps.addType('test', {
  model: defaultModel.extend({
    init: function() {
      this.on("change:attributes:id", () => {
        lets atributos = this.getAttributes();
        this.set({'layerable': attributes.id === 'layerable'});
      });
    }
  })
});

editor. BlockManager.add('test', {
  etiqueta: 'prueba',
  Categoría: 'algo',
  contenido: '<div data-gjs-type="test" style="height: 20px; background-color: blue;" id="layerable"></div>'
});

Vídeo: Grapesjs layerable.zip

Respuestas (3)

Davidvlv29 de noviembre de 2019

Lo mismo ocurre cuando intento añadir o eliminar un botón de barra de herramientas en un evento: la barra de herramientas no se actualiza hasta que desselecciono el componente y lo vuelvo a seleccionar:

      this.on("change:attributes:id", () => {
        Sea tb = model.get('toolbar');
        if (attributes.id === 'capaz') {
            si (tb.filter(b => b.attributes.class === 'fa fa-plus').length > 0)
                TB.pop();
        }
        else {
            si (tb.filter(b => b.attributes.class === 'fa fa-plus').length === 0)
                tb.push({
                    Atributos: { Clase: 'FA FA-plus' },
                    comando: () => {
                        model.components().add('<div>test</div');
                    }
                });
            }
      });
Davidvlv29 de noviembre de 2019

Además, si pones 'removible' en falso en el mismo lugar donde se pone 'layerable' en mi publicación, la barra de herramientas no se actualiza para eliminar el botón de borrar hasta que guardas y vuelves a cargar.

artf30 de noviembre de 2019

Intenta activar este evento después de que tus actualizaciones 'editor.trigger('component:toggled')'

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.