I open radeditor with default settings from your online demo.
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Editor/Examples/Default/DefaultCS.aspx
There are logo image on top ofthe page.
Original img html:
<img alt="product logo" src="../../Img/productLogoLight.gif" originalAttribute="src" originalPath="../../Img/productLogoLight.gif" />
Then i resize it and open html. Code is changed corectly:
<img width="295" height="98" alt="product logo" src="../../Img/productLogoLight.gif" originalAttribute="src" originalPath="../../Img/productLogoLight.gif" />
But if you try to resize it once more, you can see wrong html code:
<img width="295" height="98" style="width: 344px; height: 122px" alt="product logo" src="../../Img/productLogoLight.gif" originalAttribute="src" originalPath="../../Img/productLogoLight.gif" />
All next resizings will change style atribbute only!
It's very important for me to have correct values in attributes width and height.
6 Answers, 1 is accepted
The code below will be executed when the user resizes the selected image and will strip the style attribute and set width and height attributes to the image:
<script type="text/javascript">
function OnClientLoad(editor, args)
{
editor.attachEventHandler("oncontrolselect", function ()
{
//Check if image
window.setTimeout(function()
{
var selElem = editor.getSelection().getParentElement();
if (selElem.tagName == "IMG")
{
selElem.onresizeend = function(e)
{
width = selElem.style.width;
height = selElem.style.height;
selElem.removeAttribute("style");
selElem.setAttribute("width", width);
selElem.setAttribute("height", height);
selElem.onresizeend = null;//remove handler
};
}
}, 100);
});
}
</script>
<telerik:radeditor runat="server" OnClientLoad="OnClientLoad" ID="RadEditor1">
<ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
<Content><IMG style="WIDTH: 543px; HEIGHT: 287px" alt="" src="/editorQ22008/Images/pets.jpg" width=579></Content>
</telerik:radeditor>
Kind regards,
Rumen
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
But it's work very strange...
I do some changes in code and found suitable solution.
function OnClientLoad(editor, args)
{
editor.attachEventHandler('oncontrolselect', function ()
{
window.setTimeout(function()
{
var selElem = editor.getSelection().getParentElement();
if (selElem.tagName == 'IMG')
{
if(selElem.onresizeend == null)
{
selElem.onresizeend = function(e)
{
selElem.setAttribute('width', selElem.width);
selElem.setAttribute('height', selElem.height);
};
}
}
}, 100);
});
}
Rank 2
<img alt="" style="width: 300px; height: 450px" src="/AgPlanDev/UserDirectories/A040D758-5CAB-4C8B-BC09-D4682D12F7A0/BP22/prettyboat.jpg" /><
When I add either script (and I add alert messages to make sure the scripts are being called) and hook them up to the onclientload property of the radeditor, I then click on the image, edit its properties, etc., and the tag stays exactly the same. I need it to be width=300 height=450. I was able to get this to work in pre-ajax radeditor using code you folks gave me, but I am having trouble here.
Help!
Thanks.
Laurie
Rank 2
Do you refer to the following code that applies to RadEditor Classic?
<script type="text/javascript">
function OnClientLoad(editor)
{
editor.AttachEventHandler ("RADEVENT_SUBMIT", function (e)
{
var images = editor.Document.getElementsByTagName("IMG");
for (i=0; i<images.length; i++)
{
var image = images[i];
var imageWidth = image.width;
var imageHeight = image.height;
image.setAttribute("width", imageWidth);
image.setAttribute("height", imageHeight);
}
}
);
}
</script>
<radE:RadEditor id="RadEditor1" OnClientLoad="OnClientLoad" SaveInFile="true" Runat="server">
<img style="WIDTH: 375px; HEIGHT: 500px" src="Images/NDK.jpg">
</radE:RadEditor>
Here is the rewritten code that works for RadEditor for ASP.NET AJAX:
<telerik:RadEditor runat="server" OnClientLoad="OnClientLoad"
ID="RadEditor1">
<Content>
sample content <br/> <img style="WIDTH: 375px; HEIGHT: 500px" src="Images/NDK.jpg">
</Content>
</telerik:RadEditor>
<asp:Button ID="Button1" runat="server" Text="Button" />
<script type="text/javascript">
function OnClientLoad(editor)
{
editor.add_submit(function ()
{
var images = editor.get_document().getElementsByTagName("IMG");
for (i=0; i<images.length; i++)
{
var image = images[i];
var imageWidth = image.width;
var imageHeight = image.height;
image.removeAttribute("style");
image.setAttribute("width", imageWidth);
image.setAttribute("height", imageHeight);
}
}
);
}
</script>
Best regards,
Rumen
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 2
I hadn't been using the RadEditor Classic code, because it broke when I moved to RadEditor for Ajax. I had used BlackStar's code from 8/26 and that had worked only when I resized it using handles. When I changed to use your new RadEditor for Ajax code, it worked when I used Image Properties but not when I resized it using handles. So I re-added BlackStar's code (with a small tweak) and it seems to work now in every instance. (Famous last words?) At any rate, the script I'm using right now looks like this:
<script type="text/javascript">
function
OnClientLoad(editor, args)
{
editor.add_submit(
function ()
{
var images = editor.get_document().getElementsByTagName("IMG");
for (i=0; i<images.length; i++)
{
var image = images[i];
var imageWidth = image.width;
var imageHeight = image.height;
image.removeAttribute(
"style");
image.setAttribute(
"width", imageWidth);
image.setAttribute(
"height", imageHeight);
}
});
editor.attachEventHandler(
'oncontrolselect', function ()
{
window.setTimeout(
function()
{
var selElem = editor.getSelection().getParentElement();
if (selElem.tagName == 'IMG')
{
if(selElem.onresizeend == null)
{
selElem.onresizeend =
function(e)
{
selElem.setAttribute(
'width', selElem.width);
selElem.setAttribute(
'height', selElem.height);
selElem.removeAttribute(
"style");
};
}
}
}, 100);
});
}
</script>