使用TinyMCE在图像中添加内联CSS

Question

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

Answer 1

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> 

Answer 2

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

Answer 3

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

Answer 4

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