Tengo el complemento TinyMCE en mi sitio. Al agregar imágenes en el área de texto del complemento TinyMCE, quiero que estas imágenes tengan incorporada la carga diferida. Las miniaturas de mi sitio tienen un tipo específico de carga diferida donde la imagen src tiene un fondo gris. Dependiendo del tamaño de la pantalla del usuario, se carga el tipo de imagen. Las imágenes móviles tienen el atributo de datos de data-mobile-src y las imágenes de escritorio tienen el atributo de datos de data-large-src.
¿Cómo hago para que una vez que el área de texto se cargue en la tabla de mi base de datos, las imágenes se puedan cargar de forma diferida?
Para cualquiera que busque en el futuro, puede usar extended_valid_elements .
Esta propiedad se utiliza para permitir atributos válidos y puede especificar un valor predeterminado para ellos. Básicamente, esta línea agrega 'loading=lazy' automáticamente.
extended_valid_elements : 'img[class|src|alt|title|width|loading=lazy]', Entiendo que algunos de ustedes quieren usar técnicas similares a data-src para admitir navegadores más antiguos, no pude encontrar una manera decente de hacerlo usando ninguna de las configuraciones que proporciona TinyMCE. Como solución, creo que esto funciona bien.
deje que htmlString sea la cadena de contenido recibida de tinymce y
const doc = new DOMParser().parseFromString(htmlString, "text/html"); doc.body.querySelectorAll('img').forEach(img => { img.setAttribute('data-src', img.src), img.removeAttribute('src') }) console.log(doc.body.innerHTML) // your html to be sent to the serverIncluso puede utilizar esta técnica para convertir imágenes en elementos de imagen y configurarlos. Esta técnica también se puede implementar en el lado del servidor, utilizando la biblioteca JSDom.