RadEditior Image width & height fixed

2 posts, 0 answers
  1. GK
    GK avatar
    11 posts
    Member since:
    Jun 2010

    Posted 04 Jul 2011 Link to this post

    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

  2. Rumen
    Admin
    Rumen avatar
    13748 posts

    Posted 05 Jul 2011 Link to this post

    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!
Back to Top