I'm using Tiny MCE 4 for users posting on my website. It works very well, but the problem is that when a users puts an image in Tiny MCE, and changes its size, it generates the following line:

<img src="source/imagem.jpg?14641" alt="" width="550" height="838">

The result is a non responsive picture. How can I configure Tiny MCE to add the following inline css attributes on the image ?

<img src="source/imagem.jpg?14641" alt="" width="550" height="838" style="
    width: 100%; max-width: 550px; height: auto;">

I'm using Tiny MCE 4 for users posting on my website. It works very well, but the problem is that when a users puts an image in Tiny MCE, and changes its size, it generates the following line:

<img src="source/imagem.jpg?14641" alt="" width="550" height="838">

The result is a non responsive picture. How can I configure Tiny MCE to add the following inline css attributes on the image ?

<img src="source/imagem.jpg?14641" alt="" width="550" height="838" style="
    width: 100%; max-width: 550px; height: auto;">

• javascript
• css
• tinymce
• tinymce-4

• How can an image have a fixed size and being responsive at the same time? – a better oliver Commented Jun 2, 2016 at 14:16
• 1 you can apply style in each image if you want in tinymce just set image_advtab: true in your tinymce.init function. With the above setting you can set the style in the advanced settings tab of insert/edit image – user2560539 Commented Jun 7, 2016 at 17:31

4 Answers 4

Why not simply creating a CSS rule that adds the required attributes to all img elements of a particular container. For example, in a div element of class container, you can define the following CSS selector:

.container img {
    max-width:100%;
    height:auto;
}

Here is a sample of the result on a simple page. You can see that the yellow image is unchanged but all images contained in the container div children elements are resized (here the green and blue images).

.container img {
	max-width:100%;
	height:auto;
}

<img src="http://placehold.it/400x400/EEE04A/ffffff" />
<div class="container" style="width:150px;">
	<img src="http://placehold.it/800x300/5cb85c/ffffff" />
	<div>
		<img src="http://placehold.it/800x600/5bc0de/ffffff" />
	</div>
</div>

Add inline styles with '!important' and any image don't change size.

.tiny-mce-wrapper img {
    width: 100% !important;
	max-width:100% !important;
	height:auto !important;
}

You can use javascript (with jQuery) to handle this (without reconfiguring tinymce). You just have to include this into the page that is showing the images.

$(document).ready(function () {

    $('.Container').find('img').each(function () {

        var _this = $(this);

        _this.css({
            'width': _this.width,
            'height': _this.height
        });

        _this.removeAttr('width');
        _this.removeAttr('height');
    });
});

You can set style attribute values in Tinymce if you have image_advtab set to true as in the below example. By applying this you will get an extra tab in your insert/edit image and set the style you want.

Tinymce example

 tinymce.init({
      selector: 'textarea',
      height: 500,
      theme: 'modern',
      plugins: [
        'advlist autolink lists link image charmap print preview hr anchor pagebreak',
        'searchreplace wordcount visualblocks visualchars code fullscreen',
        'insertdatetime media nonbreaking save table contextmenu directionality',
        'emoticons template paste textcolor colorpicker textpattern imagetools'
      ],
      toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
      toolbar2: 'print preview media | forecolor backcolor emoticons',
      image_advtab: true,
      templates: [
        { title: 'Test template 1', content: 'Test 1' },
        { title: 'Test template 2', content: 'Test 2' }
      ]
     });