TinyMCE add loading="lazy" to image tag

Question

Nowadays, many browsers like Chrome, Firefox, and Edge support native lazy load image. How can I have the TinyMCE add loading="lazy" to image tag? So that, next time when admin insert the image to the web content via TinyMCE, all images will automatically have lazy load.

Answer 1

This worked for me. When adding a new attribute by specifying an existing element rule (e.g. img), the entire rule for that element is over-ridden so be sure to include all valid attributes not just the one you wish to add.

      tinymce.init({
            extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|loading=lazy]" 
      });