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:

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

Galvan

Answer 1

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.

Galvan

Answer 2

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

Andee

Answer 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.

Nardi

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? – Galvan

there exists a tinymce bug report for the handles under webkit (safari/chrome): tinymce.com/develop/bugtracker_view.php?id=2495 – Nardi

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? – Galvan

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 – Nardi