This is a migrated thread and some comments may be shown as answers.

RadEditior Image width & height fixed

1 Answer 145 Views
Editor
This is a migrated thread and some comments may be shown as answers.
GK
Top achievements
Rank 1
GK asked on 04 Jul 2011, 03:41 PM
Hi,

I am trying to fix the widht and height of the image chosen in telerik RadEditior, i have tried with both Javascript and C# code saperately which i found in forums, but could not resolve.
I am using V.S 2010 and telerik product version 2009.3.1103.35.

Javascript used:

 

 

<script type="text/javascript">  

 

function OnClientLoad(editor, args) {  

editor.attachEventHandler( 

"oncontrolselect", function () {  

//Check if image  

window.setTimeout(

function () {  

var selElem = editor.getSelection().getParentElement();  

alert(selElem.tagName); 

if (selElem.tagName == "IMG") {  

//Store current width and height  

curWidth = selElem.offsetWidth;

curHeight = selElem.offsetHeight; 

//Possible to resize, so attach eventhandler  

selElem.onresizeend = 

function (e) {  

alert("I was resized");  

selElem.style.width = "150";  

selElem.style.height ="150"

selElem.onresizeend = null; //remove handler  

 

//Make calculations about skaling, then re-size image  

};

}

}, 0);

});

}
Code used in C#

The one which i have found in these attachements,
In page_load
{ string [] paths = new string[] { "~/Images/editor" };

 

RadEditor1.ImageManager.ViewPaths = paths;

RadEditor1.ImageManager.UploadPaths = paths;

RadEditor1.ImageManager.DeletePaths = paths;

RadEditor1.ImageManager.ContentProviderTypeName =

 

typeof(ChangeImageSizeProvider).AssemblyQualifiedName;
}

 public class ChangeImageSizeProvider : Telerik.Web.UI.Widgets.FileSystemContentProvider 

public ChangeImageSizeProvider(HttpContext context, string[] searchPatterns, string[] viewPaths, string[] uploadPaths, string[] deletePaths, string selectedUrl, string selectedItemTag) 

base(context, searchPatterns, viewPaths, uploadPaths, deletePaths, selectedUrl, selectedItemTag)  

{  

public override string StoreFile(UploadedFile file, string path, string name, params string[] arguments)

 {
System.Drawing.Image image = System.Drawing.Image.FromStream(file.InputStream);  

string physicalPath = Context.Server.MapPath(path); 
 int newWidth = 100;// Fixed width 
 int newHeight = 100;// Fixed height  

System.Drawing.Image resultImage = ResizeImage(image, new Size(newWidth, newHeight));

 resultImage.Save(physicalPath + name); 

string result = path + name; 
 return result;  

}

 

private System.Drawing.Image ResizeImage(System.Drawing.Image sourceImage, Size newSize)  

Bitmap bitmap = new Bitmap(newSize.Width, newSize.Height); 
 Graphics g = Graphics.FromImage((System.Drawing.Image)bitmap);

g.InterpolationMode = InterpolationMode.HighQualityBicubic;  

g.DrawImage(sourceImage, 0, 0, newSize.Width, newSize.Height);

g.Dispose();

 return (System.Drawing.Image)bitmap;  

}

}

 

 I have a save option with which i am saving 

 

 asdf.Content = this.RadEditor1.Content;

 asdf.save();

Please let me know, if I need to do anything else.

Thanks
G Krishna

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 05 Jul 2011, 12:53 PM
Hello Gopi,

You are using a very old version of RadEditor, which does not support the latest version of IE9. The oncontrolselect event is also supported only by Internet Explorer. This means that the JavaScript solution works in IE only but not in other browsers.

As to the FileSystemContent provider it works only when uploading images via the Upload dialog of the Image manager. Note that the user will be still able to resize the images in the content area even if they are inserted with minimal size in the content area.

You can disable the image resizing in IE by setting the unselectable="on" attribute to all IMG tags in the content area, then the browser will not display the image handlers, e.g.

<script type="text/javascript">
function OnClientSelectionChange(editor)
{
var images = editor.get_document().getElementsByTagName("IMG");
for (var i = 0; i < images.length; i++)
{
var image = images[i];
image.setAttribute("unselectable", "on");
}
}
</script>

<telerik:RadEditor ID="RadEditor1"

OnClientSelectionChange="OnClientSelectionChange"

runat="server" Width="100%" Height="345px">
<Content>
<img src="http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif"/>
<a href="www.telerik.com">telerik</a>
<img src="http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif"/>
</Content>
</telerik:RadEditor>

The unselectable attribute is supported by IE. Opera, Chrome and Safari do not offer resize handlers for the images.

Best wishes,
Rumen
the Telerik team
Register for the Q2 2011 What’s New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
Tags
Editor
Asked by
GK
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or