Cómo actualizar el valor del rasgo
@abzal0 vale! Aunque el enfoque de la hélice debe funcionar bien, no sé por qué no es así, o me estoy perdiendo algo aquí. Si queremos usar los atributos, debes usar ''addAttributes'' para cambiar el atributo, aquí tienes un ejemplo práctico del procedimiento: ¡Salud!
Lee la respuesta completa abajo ↓Pregunta
Hola @artf muchas gracias por un gran proyecto,
He creado un nuevo tipo, es similar al enlace normal, pero el título del enlace se actualiza con ajax. Luego actualiza el rasgo 'linktitle'. El valor de este y el lienzo sí se actualizan, pero el rasgo dentro de "Configuración" sigue mostrando el valor inicial y no cambia.
Parte del código que debe actualizar el valor:
editor. DomComponents.addType('newLink', {
modelo: {
Predeterminados: {
Componentes: [
{
Resaltable: Cierto,
Editable: Cierto,
Seleccionable: Verdadero
}],
Rasgos: [
{
Tipo: 'texto',
etiqueta: 'Url',
Nombre: 'URL',
valor: 'https://',
cambioProp: 0
},
{
Tipo: 'texto',
etiqueta: 'Título',
Nombre: 'linktitle',
valor: 'Título del enlace', //esto debe actualizarse
cambioProp: 0
}
]}},
Vista:{
etiquetaNombre: 'div',
init({ model }) {
this.listenTo(model, 'change:attributes', model => {
Primer intento
editor.getSelected().updateTrait('linktitle', {
Tipo: 'texto',
etiqueta: 'Título 2',
Nombre: 'linktitle',
valor: 'AA', //actualizando el valor a AA
cambioProp: 0
});
Aparece indefinido en el lienzo pero solo actualiza la etiqueta, hay que actualizar el valor
Segundo intento
this.model.atributos.atributos.título=' BB ';
actualiza el enlace del lienzo a BB, pero no actualiza el rasgo
editor.trigger('component:toggled');
editor.trigger('component:actualizado');
editor.trigger('component:actualización:linktitle');
editor.trigger();
});
},
}
}
)
Cualquier sugerencia para actualizar el valor del rasgo sería de ayuda.Respuestas (3)
@abzal0 vale! Aunque el enfoque de la hélice debe funcionar bien, no sé por qué no es así, o me estoy perdiendo algo aquí. Si queremos usar los atributos, debes usar ''addAttributes'' para cambiar el atributo, aquí tienes un ejemplo práctico del procedimiento:
domc.addType('test', {
modelo: {
init() {
this.listenTo(this, 'change:attributes:linkTitle', () => console.log('linkTitle', this.getAttributes()['linkTitle']))
},
Predeterminados: {
atributos: {
enlaceTítulo: '',
},
estilo: {
Relleno: '25px',
Margen: '25px',
},
Rasgos: [
{tipo: 'texto', nombre: 'linkTitle', changeProp: false, label: 'Link Title'}
]
}
},
Vista: {
init() {
const oldValue = this.model.getAttributes()['linkTitle']
console.log('linkTitle: ', viejoValor)
this.model.addAttributes({'linkTitle':oldValue + ' Changed!'})
}
}
})
¡Salud!
@pouyamiralayi muchas gracias por tu tiempo, esto solucionó el problema: ' this.model.addAttributes({'linkTitle':oldValue + ' Cambiado!'}) ` Has ahorrado mucho tiempo, gracias de nuevo :)
editor.getSelected().getTrait('linktitle').set('value','CCC');
tampoco funciona
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
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...
Issue #1293
Envío del formulario de contacto
Hola, artf Gracias por tu gran trabajo. Me gustaría integrar este gran editor con Angular. Integré este Angular 6 y funciona bien. Pero ten...
Issue #1349
Las propiedades del gestor de estilos de actualización dependen de los componentes
Hola @artf Gracias por la gran biblioteca. Quiero actualizar las propiedades del gestor de estilos en función del tipo de componentes. Por...
Issue #1754
[Bug] problema de estilización con ckeditor(4)
¡Hola @artf todos! ¡Gracias de nuevo por el trabajo increíble! Intenté implementar ckeditor con grapesjs y parece funcionar bastante bien,...
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.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
Preset DevFuture 2.0 — New Update Released
Preset continues evolving as a clean, production-ready starting point for building visual editors powered by GrapesJS
Tutorial
How Much Can You Earn on GJS.Market in a Month?
Discover how DevFuture earns €2,000+ monthly on GJS.Market — and learn how you can start building and selling your own GrapesJS plugins.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.