CODEWITHSUNDEEP
javascriptcsstinymcetinymce-4
caiocafardo
caiocafardo

Reputation: 196

Add inline CSS in the image using TinyMCE

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;">

Upvotes: 2

Views: 3049

Answers (4)

user2560539
user2560539

Reputation:

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

enter image description here

Upvotes: 0

Gustav G
Gustav G

Reputation: 479

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

Upvotes: 0

slava_slava
slava_slava

Reputation: 666

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;
}

Upvotes: 1

Arnaud Develay
Arnaud Develay

Reputation: 3970

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>

Upvotes: 5

Related Questions