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

Default settings of height,width, border color etc. of Images.

2 Answers 59 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Fusion Outsourcing Software Pvt. Ltd.
Top achievements
Rank 1
Fusion Outsourcing Software Pvt. Ltd. asked on 24 Aug 2009, 10:31 AM
Hello Telerik team,

I am having a RadEditor, in which i am trying to create an html template. I have fixed the width of the template. We have got Image Manager to insert image in our template.

So, when we use image manager to upload an image from my system, If image width is more than the html template width, I want the image width & height should be adjusted in proportion with the width of the template . Also a border with border-width =3 & border color= red is to be set. Also the allignment of the image should be center allign.

I want these as the default settings for most of the images i want to have in my template.

I dont want to use the properties window of Image manager to set these properties, as i want the above specifications with every image i want to insert.

 Please help me out with the possible solution for my problem. 

I have looked for the properties of image manager but found nothing helpful.

Kindly help me out with the issue.

Thanks,
Chinmay Sharma.

2 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 26 Aug 2009, 02:46 PM
Hi Chinmay,

My recommendation is to attach to the OnClientPasteHtml event of RadEditor, which is useful in scenarios where the developers need to examine or modify the HTML to be pasted by an editor tool before it is inserted in the editor content area.

I would like to propose the following solution that will resize an image to 100px if its original size exceeds 100px:

<telerik:radeditor runat="server" ID="RadEditor1" OnClientPasteHtml="OnClientPasteHtml">  
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images/" />  
      <Content> Some content here </Content>                      
</telerik:radeditor>  
<script type="text/javascript">  
function OnClientPasteHtml(editor, args)  
{  
    //if ImageManager, do something else  
    if (args && args.get_commandName() == "ImageManager")  
    {  
        var value = args.get_value().trim();  
      
        var div = document.createElement("DIV");  
          
        Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);  
          
        //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 IMAGE SIZE  
        alert(img.offsetWidth  + " -- " + img.offsetHeight);  
          
        if (img.offsetWidth > "150")  
        { 
            img.width = "100"
            img.style.width = "100"
        } 
        //set border
         img.style.border = "3px solid red";
        args.set_value(div.innerHTML);  
    }  
}  
</script>    
 

I hope this helps.


All the best,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Nick Smith
Top achievements
Rank 1
answered on 19 Oct 2009, 02:26 PM
Thanks for this.  It was exacty what I needed.

Nick
Tags
Editor
Asked by
Fusion Outsourcing Software Pvt. Ltd.
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Nick Smith
Top achievements
Rank 1
Share this question
or