Disable Image Resizing in RadEditor

[leapopotomus]

Hi,

I just wanted to find out if it's possible to disable image resizing in the Design mode of the RadEditor?

The reason for doing this is that we want images to be pasted into the editor "as is".  If we need
to resize them, we want to do it in Photoshop or Gimp.  We've had the situation where a user uploads a 4Mb
image, then resizes it down to thumbnail size.

Thanks for the help.


Bart.

[Schlurk]

Try the following code, which sets the unselectable="on" and makes sure that FF doesn't work around it on all images

<script type="text/javascript">
function OnClientLoad(editor, args)
{
    var elems = editor.get_document().getElementsByTagName("IMG");
    for (var i=0; i < elems.length; i++)
    {
        var image = elems[i];
        image.setAttribute("unselectable","on");
        image.style.MozUserSelect = "none";
        image.style.MozUserFocus = "ignore";
    }
}
</script>
<telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
    <Content>
        <img alt="" src="http://www.telerik.com/images/editor/news/teched2004.gif">
    </Content>
</telerik:radeditor>

(Can be found in a KB article here)

[leapopotomus]

Hi,

It made the images unselectable, but I could still resize them if I right-click on the image, then
the image anchors come up.

Thanks anyway for the help :)

[Schlurk]

var image = elems[i];
image.setAttribute("unselectable","on");
image.setAttribute("onresizestart","return false");
image.style.MozUserSelect = "none";
image.style.MozUserFocus = "ignore";

Try that with the extra line after the first .setAttribute(....), that could work (I haven't been able to attempt to replicate the problem on my machine yet).

[Michael Weiss]

The only solutions to this problem I've been able to find makes the images unselectable entirely, which means you can't reposition them. Is there any possible way to allow the user to select the images, reposition them, bring up their properties, while not allowing them to resize them?

Thanks a lot.

[Dobromir]

Hi Michael,

There is no convenient approach to disable the resizing of an image in an editable <iframe> or a <div>. In order to do so under Internet Explorer I suggest you to attach event handler to the image's onresizestart event and cancel its execution. Under FireFox you can execute the command document.execCommand("enableObjectResizing", false, false);
which will remove the resize handlers to all elements inside the <iframe> / <div>. Using this approach, will not affect the ability to move and select elements.

Please find attached a sample project demonstrating the above mentioned approach.

All the best,
Dobromir
the Telerik team