jquery - TinyMCE 4 removeadd attributes for all images

i want to search for all images that have been add to TinyMCE 4 and:

1. Remove the height attribute from the images

2. Add style="max-width: 100%;" to all images

   • what is the best way to do this tasks?

Thanks

i want to search for all images that have been add to TinyMCE 4 and:

1. Remove the height attribute from the images

2. Add style="max-width: 100%;" to all images

   • what is the best way to do this tasks?

Thanks

• jquery
• javascript
• tinymce

Share Improve this question asked Nov 5, 2015 at 12:29 user2413244user2413244 1122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Assuming your TinyMCE4 container has an id of 'tiny-mce-4', you could add this js to your functions.php.

function toArray (collection) {
    return Array.prototype.slice.call(collection);
}

var imgs = toArray(document.querySelectorAll('#tiny-mce-4 img'));


imgs.forEach(function(img){
    img.setAttribute('style', img.getAttribute('style').replace(/((height:).*?(px;))/g, 'max-width: 100%;'));
});

<div id="tiny-mce-4">

  <img src="img1" style="height: 500px; width: 800px;" />
  <img src="img2" style="height: 500px; width: 800px;" />
  <img src="img3" style="height: 500px; width: 800px;" />
  <img src="img4" style="width: 800px;" />

</div>

  <img src="img5" style="height: 500px; width: 800px;" />