Automatically adding image Width and Height to IMG tags when using Image Manager

2 posts, 0 answers
  1. dror riov
    dror riov avatar
    10 posts
    Member since:
    Nov 2005

    Posted 28 Apr 2011 Link to this post

    Hello

    We are using RadEditor and ImageManager to insert images into it...
    What we need and could not find the option is to automatically add image width and height tags in the "<img" tag. (After pressing "insert" in Image Manger to add the image to RadEditor)

    thank you,
    Dror
  2. Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 02 May 2011 Link to this post

    Hi Dror,

    You can set an image’s width and height when adding a new image through the Image manager using the code below:

    Copy Code
    <script type="text/javascript">
     
        function changeImageManager(editor, args) {
     
            if (args.get_commandName() == "ImageManager") {
     
                var callbackFunction = function(sender, args) {
     
                    //result holds the image element  
     
                    var result = Telerik.Web.UI.Editor.Utils.getOuterHtml(args.get_value());
     
      
     
                    var div = document.createElement("DIV");
     
                    Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, result);
     
      
     
                    //First child must be the image!   
     
                    var img = div.firstChild;
     
      
     
                    div.style.overflow = "hidden";
     
                    div.style.width = "1px";
     
                    div.style.height = "1px";
     
      
     
                    document.body.appendChild(div);
     
                    //GET THE INSERTED IMAGE WIDTH AND HEIGHT   
     
                    //alert(img.offsetWidth + " -- " + img.offsetHeight);
     
                    img.width = img.offsetWidth;
     
                    img.height = img.offsetHeight;
     
                    editor.pasteHtml(div.innerHTML, "ImageManager");
     
                };
     
                args.set_callbackFunction(callbackFunction);
     
            }
     
        }   
     
    </script>   
     
        
     
    <telerik:radeditor runat="server" ID="RadEditor1" OnClientCommandExecuting="changeImageManager">  
     
        <ImageManager ViewPaths="~/images" UploadPaths="~/images" />  
    </telerik:radeditor>


    Greetings,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top