Tras actualizar los atributos de los componentes usando editor.on('component:add',function(){}); El ítem de la caja azul no es correcto.
@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
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)
@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
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.
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.
Issue #792
La propiedad de script usando función no funciona con bloques
En la documentación de Componentes & JS hay este ejemplo: Esto funciona perfectamente. Pero no podría usar una función en lugar de una cade...
Issue #581
Eventos relacionados con los componentes de lectura
La wiki de la API del editor lista un conjunto de eventos relacionados con componentes que pueden ser escuchados (por ejemplo, 'component:a...
Issue #604
disparador tras retirar el componente
Chicos, necesito activar alguna acción después de eliminar los componentes del editor. ¿Hay alguna forma de hacerlo? ¿O tengo que escribir...
Issue #721
Añadir Component Script Js
Tengo una pregunta sobre cómo inyectar script js en GrapesJs. ¿Puedo añadir <script> en grapesJS usando function editor.getComponents().add...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.