Volver a renderizar la vista en el lienzo del editor cada vez que cambie el valor del rasgo
Actualiza tu opinión de esta manera '''js view: dView.extend({ init() { this.listenTo(this.model, 'change:attributes:data-dummyimage', this.render) }, ... }) ```
Lee la respuesta completa abajo ↓Pregunta
¿Existe alguna forma posible en 'grapesjs' de que cada vez que un usuario cambia el valor de un 'Trait' de un 'componente' personalizado, la función de renderizado escuche o se vuelva a renderizar?
Estoy creando un componente personalizado para contenidos dinámicos. El código de componente personalizado es:
domComps.addType('dynamicImage', {
model: dModel.extend({
defaults: Object.assign({}, dModel.prototype.defaults, {
Rasgos: [
Las cadenas se convierten automáticamente en tipos de texto
'src',
'título',
{
etiqueta: 'Imagen Ficticia',
Nombre: 'Data-Dummyimage',
Valor: 'http://localhost/templates/assets/logo.png'
}
],
}),
}, {
isComponent: function (el) {
return { type: 'image' }
}
}),
view: dView.extend({
eventos: { },
render: función () {
dView.prototype.render.apply(esto, argumentos);
this.el.src = this.el.dataset.dummyimage;
devuelvo esto;
}
})
});
Quiero que cada vez que el usuario cambie el valor de 'Trait' llamado Dummy Image, la función de renderizado se ejecute y afecte el valor 'src' en consecuencia en el resultado de 'canvas' para la etiqueta 'img'.
Esto solo afecta la vista en lienzo del editor, pero no en 'modelo'.
¿Alguien puede ayudarme a resolver esto?
Gracias de antemano. :)
Respuestas (3)
Actualiza tu opinión de esta manera '''js view: dView.extend({ init() { this.listenTo(this.model, 'change:attributes:data-dummyimage', this.render) }, ... })
Después de 2 días esto me salvó la vida. ¡Gracias a los dos!
Pero las propiedades de HTML no se pueden editar en Canvas.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #460
Cuando la vista del componente modifica el HTML, los componentes de texto ya no son editables
Estoy intentando crear un componente personalizado que contenga algo de texto lorem ipsum en el contenido, para editarlo una vez que esté e...
Issue #1424
El valor del rasgo de casilla se muestra de forma diferente en vista (render()) frente al modelo (getHtml())
Tengo un componente personalizado con un rasgo de casilla de verificación 'mostrar-nombre'. Cuando el valor del rasgo es 'true', el compone...
Issue #1472
[PREGUNTAS] Bloque de código personalizado y JS
¿Me pregunto si existe alguna limitación o si realmente es posible crear un bloque que permita al usuario del editor escribir código JavaSc...
Issue #577
Solo permite un componente de tipo específico en el editor
¿Hay alguna forma de no permitir que ningún componente específico se deshaga más de una vez en la página? Tengo un componente personalizado...
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.