TinyMCE prevent image resizing

Question

I am adding an image to a TinyMCE editor using:

var params = {
             src: filename,
             title: "Attached image: " + filename,
             width: 500
             };

ed.execCommand("mceInsertContent", false, ed.dom.createHTML("img", params));

This insert the image correctly in the editor. However, when the user clicks on the image he has the ability of resizing it.

I would like to know if there is a way to:

Prevent the user to resize only in one direction (i.e. how do I keep a fixed aspect ratio for the image)
Completely prevent the user to resize the image

score 11 · Answer 1 · edited Aug 20 '12 at 12:11

11

I found a (partial) answer, so I thought I will share it here.

Adding

'object_resizing' : false

In the editor config prevents the resizing. Note that this is a feature of Mozilla only (e.g. Google Chrome does not allow you to resize the image).

I am still looking for a way of keeping aspect ratio in real time, but I do not know if that is really possible.

edited Aug 20 '12 at 12:11

Thariama

50,002
13
138
166

answered Aug 18 '12 at 09:16

nico

50,859
17
87
112

TrizZz · Answer 2 · 2012-08-24T12:01:08.563

4

You can simply add this little plugin to tinyMCE, I used it and it works very well! Here's the documentation: Link

edited Aug 24 '12 at 12:01

answered Aug 23 '12 at 19:41

TrizZz

1,200
5
15

Thariama · Answer 3 · 2012-08-20T11:59:40.687

3

You would need to implement a resize handler (for example a jQuery handler). It might be helpfull to add attributes to your images to save its dimensions or to use one single setting holding the aspect ratio. For this you will adjust the tinymce configuration setting valid_elements to allow those attributes for images - otherwise tinymce would strip them out.

When resize gets fired you grab the new dimensions and adjust the dimensions according to the aspect ratio - eigther adjust using the new width or new heigth (the other value is needs to get corrected).

Example: images have an attribute aspectratio holding the aspect ration

You may place this code in thetinymce setup configuration parameter

   setup : function(ed) {
      ed.onInit.add(function(ed) {
        $(ed.getBody()).find('img').resize( function(event){

          $(event.target).css('width', parseInt ( event.target.width * this.aspectratio)  );

        });
      });
   }

Update:

I have created a tinymce fiddle to show an example to use with IE.

edited Aug 20 '12 at 11:59

answered Aug 20 '12 at 10:21

Thariama

50,002
13
138
166

Thanks for taking the time of doing that. However, at least in FF and Chrome (sorry, using Linux, cannot test with IE), I do not have the option of resizing the image. If I turn on `object_resizing` resize events are NOT called... Is there something I am missing? – nico Aug 20 '12 at 14:25
there exists a tinymce bug report for the handles under webkit (safari/chrome): tinymce.com/develop/bugtracker_view.php?id=2495 – Thariama Aug 20 '12 at 15:33
well, that is not the problem, `object_resizing=FALSE` turns off the handles in Firefox (don't know about IE). The fact that Webkit does not show them is simply because it does not implement object resizing in `iframes`. My point is that resize events are not called even in Firefox. I assume this is due to the fact that the event is not in the same window. So my question is: in IE 1) do you see handles with `object_resizing=false`? 2) are resize events called when you resize the image? – nico Aug 20 '12 at 15:43
1) i see handles in IE. 2) yes resize events are called (unfortunatly too many are firedm, which requires special treatment here (see the fiddle)). but object_resizing:true leads to no handles in firefox – Thariama Aug 20 '12 at 15:56

TinyMCE prevent image resizing

3 Answers3