Add inline CSS to image using Tiny MCE

Question

I’m using Tiny MCE for the customer to post on a website I’m developing. It works super well, the problem is that when you post an image on Tiny MCE, and change its size, it generates the following line:

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

And with that the image is not responsive, what it would need is for Tiny MCE to put a css inline in the image, to look like this:

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

Does anyone know if it’s possible?

Answer 1

In Tinymce.ini add the following code:

image_dimensions: false,
         image_class_list: [
            {title: 'Responsive', value: 'img-responsive'}
        ]

You can also try using some extra plugins from it like:

http://tinymceplugins.com/plugins/responsive-filemanager

http://tinymceplugins.com/plugins/tinymce-bootstrap-tools