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

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

1 Answer 114 Views
Editor
This is a migrated thread and some comments may be shown as answers.
dror riov
Top achievements
Rank 1
dror riov asked on 28 Apr 2011, 12:07 PM
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

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 02 May 2011, 12:56 PM
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.

Tags
Editor
Asked by
dror riov
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or