Issue #957💬 RespondidoAbierto el 15 de marzo de 2018por Coyote6Reacciones 0

Añadir atributos personalizados (datos-) a los recursos/imágenes al subir/seleccionar

Respuesta rápidapor Coyote6

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)

Coyote616 de marzo de 2018

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.
artf17 de marzo de 2018

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': '...'}); });

Coyote620 de marzo de 2018

¡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.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.