Añadir atributos personalizados (datos-) a los recursos/imágenes al subir/seleccionar
He encontrado una solución, pero seguro que hay una mejor que esta: '''javascript editor.on('component:update', (component) => { if (component.attributes.type == 'image' & typeof (assets[component.attributes.src]) != 'indefinido') { var thisAsset = assets[component.attributes.src]; var iframe = $('#gjs iframe'); $('.'...
Lee la respuesta completa abajo ↓Pregunta
Hola, estoy haciendo todo lo posible por encontrar la mejor manera de hacerlo, pero necesito adjuntar dos etiquetas de datos HTML5 personalizadas a una imagen una vez seleccionada desde el gestor de recursos. Así: '''html <img src="path/to/img" data-entity-type="file" data-entity-uuid="some-uuid" />
Esperaba poder adjuntarlo al añadir recursos.
'''javascript
var newAssets = [];
for (var id in data.files) {
var a = {
Categoría: datos.archivos[id].categoría,
src: data.files[id].src,
tipo: 'imagen',
Probar estos métodos no funcionó
dataEntityUuid: data.files[id].uuid,
O
'data-entity-uuid': data.files[id].uuid,
O
atributos: {
dataEntityUuid: data.files[id].uuid,
}
O
atributos: {
'data-entity-uuid': data.files[id].uuid,
}
};
nuevoActivos[nuevoActivos.longitud] = a;
}
am.add (nuevosActivos);
Como no conseguí que funcionara, intenté añadirlos en el evento de actualización de componentes, pero dudo que eso sea devolver un valor para actualizarlos después de añadirlos. '''javascript editor.on('component:update', (component) => { if (component.attributes.type == 'image' & typeof (assets[component.attributes.src]) != 'indefinido') { var thisAsset = assets[component.attributes.src]; component.atributos.atributos['data-uuid'] = thisAsset.dataEntityUuid; } componente de retorno; No esperes que esto sirva de nada más que lo intenté. });
Así que luego intenté usar el selector y jQuery para añadir los atributos en el evento de actualización de componentes, pero tampoco funcionó.
'''javascript
editor.on('component:update', (component) => {
if (component.attributes.type == 'image' & typeof (assets[component.attributes.src]) != 'indefinido') {
var thisAsset = assets[component.attributes.src];
$('.' + component.cid).attr('dataentity-uuid', thisAsset.dataEntityUuid);
}
});
También probé a extender el componente de imagen y seleccionarlo mediante el código de añadir recursos, pero tampoco pareció funcionar.
'''javascript
var newAssets = [];
for (var id in data.files) {
var a = {
Categoría: datos.archivos[id].categoría,
src: data.files[id].src,
Tipo: 'Nuevo-Componente-Imagen'
};
nuevoActivos[nuevoActivos.longitud] = a;
Assets[data.files[id].src] = a;
}
am.add (nuevosActivos);
Definitivamente estoy haciendo algo mal. Si alguien pudiera indicarme la dirección correcta, sería de gran ayuda. Gracias.
Respuestas (3)
He encontrado una solución, pero seguro que hay una mejor que esta: '''javascript editor.on('component:update', (component) => { if (component.attributes.type == 'image' & typeof (assets[component.attributes.src]) != 'indefinido') { var thisAsset = assets[component.attributes.src]; var iframe = $('#gjs iframe'); $('.' + component.cid,iframe.contents()).attr('data-entity-uuid', thisAsset.uuid); } });
Gracias.
Tu solución solo actualiza el elemento dentro del lienzo y no su modelo (así que en tu código final no los verás). Cuando actualizas el modelo, su elemento visible se actualiza automáticamente, por ejemplo, '''js editor.on('component:update:src', component => { component.is('image') && component.addAttributes({'data-uuid': '...'}); });
¡Gracias! ¿Habrá alguna función en el futuro para añadir atributos durante la importación de activos? Solo tengo curiosidad.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #861
[Pregunta] Ayuda para añadir imágenes al lienzo
He seguido la documentación y he podido subir imágenes. Cuando arrastro un bloque de imagen (usando el preajuste del boletín) y selecciono...
Issue #1145
Subir imágenes a la base de datos remota
Hola a todos Estaba buscando la documentación donde el usuario puede seleccionar la imagen desde su local y luego la imagen debería almacen...
Issue #1459
[PREGUNTA] Cómo almacenar los atributos "data-" en la etiqueta html del componente
Hola, estoy desarrollando un plugin para gráficos usando chart.js. Para que la plantilla generada renderice el gráfico desde un modelo de d...
Issue #1864
[PREGUNTA] ¿La mejor manera de escuchar los cambios en el HTML final?
Hola, Solo tenía una pregunta rápida porque no sabía cómo hacerlo o no encontré ningún problema relacionado. Solo intento llamar a una func...
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.