El nuevo botón de barra de herramientas solo funciona para componentes añadidos nuevos y no para los existentes
Probablemente el editor no cambia un componente durante la ejecución cuando se cambia su modelo, así que el componente en el lienzo se creó antes de que se modificara el modelo y por eso no mostrará los cambios en la barra de herramientas.
Lee la respuesta completa abajo ↓Pregunta
Hola a todos, ¿alguien puede explicarme por qué cuando creo un nuevo botón personalizado en la barra de herramientas, este botón solo aparece cuando añado un componente nuevo y no uno existente, aunque estos componentes son los mismos? Pensaba que eso podría ser algo relacionado con la iniciación del editor que no estoy incluyendo. @artf ¿Qué me estoy perdiendo para que funcione en init? Aquí tienes un ejemplo de cómo estoy añadiendo el botón.
const scriptTypesSupport = ['default', 'wrapper', 'text', 'textnode', 'image', 'video', 'svg', 'link'];
scriptTypesSupport && scriptTypesSupport.forEach(type => {
const typeOpt = dc.getType(type).model;
dc.addType(type, {
modelo: {
initToolbar() {
typeOpt.prototype.initToolbar.apply(esto, argumentos);
const tb = this.get('toolbar');
const tbExists = tb.some(item => item.command === 'edit-component');
if (!tbExists) {
tb.unshift({ // unshift para ser el primero y push para ser el último
comando: 'edit-component',
etiqueta: '<i class="fa fa-code"></i>',
});
this.set ('barra de herramientas', tb);
}
}
}
});
})
Funciona perfectamente, pero como he dicho solo para componentes nuevos añadidos y no para los existentes (por ejemplo, si inicio el editor con algo de código dentro del contenedor de GJS, los componentes no tendrán esta nueva opción en la barra de herramientas). Arriba puedes ver que cuando añado un segundo enlace, la barra de herramientas tiene el botón nuevo (lápiz), pero la existente no. ! captura cromada
Respuestas (3)
Probablemente el editor no cambia un componente durante la ejecución cuando se cambia su modelo, así que el componente en el lienzo se creó antes de que se modificara el modelo y por eso no mostrará los cambios en la barra de herramientas.
He solucionado esto cargando el canvas después de cargar todos los componentes y modificaciones, pero supongo que dependiendo de la configuración del almacenamiento, ejecutar 'editor.load()' podría solucionarlo.
Gracias por tu respuesta @Ju99ernaut, ¿alguna idea de cómo puedo cambiarlos durante el ejecución? Creo que puede funcionar si hago esos cambios en el núcleo, pero estaba pensando en hacer algunos plugins con este tipo de funciones y así no podríamos hacerlo funcionar en plugins externos. Así que tiene que ser después de init (creo...)
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #791
Añadir un nuevo botón en la barra de herramientas
Hola, Estoy intentando añadir un nuevo botón a la barra de herramientas con todos los componentes. He podido sumar para cada componente por...
Issue #3548
no se puede copiar con "control + C" cuando los elementos tienen tabindex de atributos = -1
¡Hola a todos! Tengo un problema con el componente personalizado. Me crearon un componente modal con atributos tabindex = -1 y no puedo usa...
Issue #2656
[BUG] Posición incorrecta de la barra de herramientas al duplicar un componente hijo
Hola, Puedes consultar este ejemplo: https://codepen.io/abozhinov/pen/XWbqjEJ Pasos para reproducir el problema:Si existen componentes, eli...
Issue #1113
[PREGUNTAS] ¿El nuevo tipo de rasgo no funciona con los componentes renderizados?
Hola, gracias por el excelente marco. Estoy intentando aplicar esto a mi proyecto. Quiero añadir un nuevo rasgo para el componente existent...
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.