Cambiar el atributo del componente del script
Puedes acceder a propiedades anidadas como esta 'var customAttribute = '{[ attributes.customAttribute ]}';' dentro del 'script'. Deberías usar las propiedades del modelo: '''js ... CustomAttribute: '', script: function() { ... ``` y luego en tu script 'var customAttribute = '{[ customProp ]}';' Una cosa más, no puedes...
Lee la respuesta completa abajo ↓Pregunta
Estoy ampliando el componente de 'texto' añadiendo un nuevo atributo y un script. Cuando un usuario escribe un determinado carácter en el componente de texto, quiero que el script cambie el atributo en el modelo del componente, pero no estoy seguro de cómo hacerlo. Esta es mi configuración para modificar el componente de texto:
var originalTextComp = domc.getType('text');
domc.addType('text', {
model: originalTextComp.model.extend({
defaults: Object.assign({}, originalTextComp.model.prototype.defaults, {
atributos: {
customAttribute: false,
},
script: function() {
var customAttribute = '{[ attributes.customAttribute ]}';
var show = function() {
if (customAttribute) {
console.log('programa');
}
};
var hide = function() {
if (customAttribute) {
console.log('esconderse');
}
};
var checkEventAndRun = function(e) {
if (e.which == 219 && !customAttribute) {
customAttribute = true;
show();
} si no (e.which == 221 && customAttribute) {
esconder();
customAttribute = false;
}
};
this.addEventListener('keyup', comprobaEventoAndRun);
this.addEventListener('blur', hide);
this.addEventListener('focus', show);
},
}),
}),
ver: originalTextComp.view
});
Tengo dos problemas: el customAttribute no se carga correctamente en el script, y no sé cómo hacer que el valor del customAttribute en el script cambie el valor del custom attribute en el modelo. Tengo un oyente ''editor.on(''component:update:attributes', model => {});''' que no se llama, incluso cuando veo 'hide' y 'show' en la consola (lo que indica que el customAttribute sí se ha cambiado en el script). El oyente solo se llama cuando coloco el componente en el lienzo (así que funciona). ¿Alguna idea?
Respuestas (2)
Puedes acceder a propiedades anidadas como esta 'var customAttribute = '{[ attributes.customAttribute ]}';' dentro del 'script'. Deberías usar las propiedades del modelo: '''js ... CustomAttribute: '', script: function() { ...
y luego en tu script 'var customAttribute = '{[ customProp ]}';'
Una cosa más, no puedes actualizar la variable dentro del 'script' y esperar que propague ese cambio, el 'script' funciona en un contexto totalmente separado #358
Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1639
[Pregunta]: ¿Sería posible cambiar la configuración en el gestor de estilos de forma que tenga href cuando se crea un enlace?
Estoy usando un boletín predefinido con RTE integrado (no quiero usar el editor CK como en la demo) Para convertir cualquier texto en enlac...
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 #701
Modificar un componente en el editor elimina el contenido del modelo
Lo que intento conseguir: Tengo atributos especiales de "datos-" en algunos de los componentes que extrao al editor. Cuando uno de estos se...
Issue #1959
[Pregunta] Editar innerHTML en un botón personalizado
Hola a todos, Estoy intentando cambiar el texto en un componente de botón, pero no consigo editarlo. He añadido este tipo: Incluí el paráme...
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.