Hi Mike,
You can easily manipulate the images in the content area by using the RadEditor client-side api. Here is an example demonstrating how to strip the width and height attributes and set width and height styles:
<script type="text/javascript">
function OnClientSubmit(editor)
{
var images = editor.Document.getElementsByTagName("IMG");
for (i=0; i<images.length; i++)
{
var image = images[i];
image.style.width = "300px";
image.style.height = "300px";
image.removeAttribute["width"];
image.removeAttribute["height"];
//or just remove the width and height attributes
}
}
</script>
<radE:RadEditor height= 150 id="RadEditor1" OnClientSubmit="OnClientSubmit" SaveInFile="true" ImagesPaths="~/Images" Runat="server">
<IMG alt="" src="/editor712/Images/Copy.jpg">
</radE:RadEditor>
You can enhance the example to fit your scenario.
You can also use the following code to remove the width and height attributes after the image resizing:
<script type="text/javascript">
function OnClientLoad(editor)
{
editor.AttachEventHandler("oncontrolselect", function()
{
//Check if image
window.setTimeout(function()
{
var selElem = editor.GetSelection().GetParentElement();
if (selElem.tagName == "IMG")
{
selElem.onresizeend = function(e)
{
selElem.style.width = selElem.width;
selElem.style.height = selElem.height;
selElem.removeAttribute("width");
selElem.removeAttribute("height");
selElem.onresizeend = null;//remove handler
};
}
}, 100);
});
}
</script>
<radE:RadEditor height= 150 id="RadEditor1" OnClientLoad="OnClientLoad" ImagesPaths="~/Images" Runat="server">
<img alt="" src="Images/Desire.jpg">
</radE:RadEditor>Greetings,
Rumen
the Telerik team