Issue #687💬 RespondidoAbierto el 27 de diciembre de 2017por TWCMReacciones 1

Tras actualizar los atributos de los componentes usando editor.on('component:add',function(){}); El ítem de la caja azul no es correcto.

Respuesta rápidapor artf1

@tommywulove vale, cierro esto @ryandeba Como ya mencionaste, la barra de herramientas se crea cuando se inicializa el componente, así que, sinceramente, no lo veo como un error y, en general, tu fragmento debería funcionar bien. Por cierto, gracias por tu disposición a ayudar

Lee la respuesta completa abajo ↓

Pregunta

Fragmento de códigoTEXT
Tras actualizar los atributos de los componentes usando editor.on('component:add',function(){}); 
El objeto de la caja azul (significa el icono de acción) no es correcto. El icono de copiar no debería aparecer.

! [imagen](https://user-images.githubusercontent.com/2859394/34370766-dad79d20-eb01-11e7-82f1-0d0b5346273c.png)

Javascript
' var hasClass = function(model, className){
        return model.get('classes').where({name: className}).length;
    }
    var updateProperty = function (model) {
        
model.set({
            arrastrable: falso,
            Droppable: falso,
            copiable: falso,
            removible: falso,
            seleccionable: false,
            editable: false
        });

si (hasClass(model,"editable")) {
            model.set ('editable', cierto);
        }
        
si (hasClass(model,"selectable")) {
            model.set ('seleccionable', verdadero);
        }
        si (hasClass(model,"content-block")) {
            model.set ('arrastrable', '#wrapper');
            model.set ('droppable', falso);
            model.set ('seleccionable', verdadero);
          
}
        
console.log(modelo);
        model.get('components').each(child => updateProperty(child))
  
}
    editor.on('component:add', función (model) {

updateProperty(model);
        console.log($(model).hasClass("editable"));

})`

Respuestas (3)

artf28 de diciembre de 2017

@tommywulove vale, cierro esto

@ryandeba Como ya mencionaste, la barra de herramientas se crea cuando se inicializa el componente, así que, sinceramente, no lo veo como un error y, en general, tu fragmento debería funcionar bien. Por cierto, gracias por tu disposición a ayudar

ryandeba28 de diciembre de 2017

Hola @tommywulove,

Creo que el "elemento de la caja azul" al que te refieres es la barra de herramientas de componentes. Todos los botones de la barra de herramientas se crean para cada componente a medida que ese componente se inicializa; Cambiar una propiedad (como 'copiable') no actualiza automáticamente la barra de herramientas.

Probablemente podrías forzar la actualización de la barra de herramientas borrando la propiedad 'toolbar' en el componente y llamando manualmente a 'initToolbar()'... Quizá algo así:

model.set("barra de herramientas", "").initToolbar();

@artf - ¿considerarías esto un error o es el comportamiento deseado? Si crees que debería cambiarse, estaré encantado de trabajar en una solicitud pull para ello.

TWCM28 de diciembre de 2017

Hola @ryandeba, Gracias por tu respuesta. Descubrí que el evento component:add no es adecuado para mi caso, así que usé component type para resolver mi problema. Actualicé el tipo de componente y añadí un nuevo tipo de componente para controlar qué acción se puede usar en el elemento.

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.