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

[Fusion Outsourcing Software Pvt. Ltd.]

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.

[Rumen]

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.

[Nick Smith]

Thanks for this.  It was exacty what I needed.

Nick