Rich text editor (tinymce) images - how to disable auto height and width?

3
votes

We're using Umbraco v7.2.1 to serve what is supposed to be responsive content.

When you add an image from the media library to the tinymce editor, this is the html that is inserted by tinymce:

    <img style="width: 500px; height:500px;" 
src="/media/1007/jobs-block.jpg?width=500&amp;height=500" alt="undefined" rel="1097" />

I really don't want ANY w x h in the tag or image src.

I have found a couple of posts regarding the tinyMce.config file and the validElements node - i removed the height and width things from the img thing in there but that had no effect.

3
tinymceumbracoumbraco7
Check out ~\Umbraco_client\tinymce3\plugins\umbracoimg\js\image.js There's a section where all this data is set. You should be able to customize it – Scherling
I was hoping for a solution that doesnt get overwritten by an upgrade... i can see it would be easy to make the necessary changes, but is there a good place to do it without changes to the umbraco core files? – jenson-button-event
Not that I know of, but I'm sure one can make a little hack somehow. I agree it's not optimal that overriding the folder with a new Umbraco version would clear your changes. Maybe consider manipulating the img elements client-side with js? – Scherling

3 Answers

11
votes

If you open the Data Type for the Richtext editor in question there is a setting called "Maximum size for inserted images". This is by default set to 500 pixels.

If you set it to 0 it will disable any resizing.

0
votes

I think you can have your cake and eat it too, no need to restrict editor re-sizing.

Adding the following properties to your img elements: max-width: 100%; height: auto !important; will allow content editors to re-size their images while also making them responsive.

0
votes

I processed the output. I removed the height and wrap images by a div by javascript and I can fully customize it via css