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

Bug with image resize!

6 Answers 75 Views
Editor
This is a migrated thread and some comments may be shown as answers.
BlackStar
Top achievements
Rank 1
BlackStar asked on 26 Aug 2008, 09:22 AM
Hello!

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

Sort by
0
Rumen
Telerik team
answered on 26 Aug 2008, 10:49 AM
Hi BlackStar,

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.
0
BlackStar
Top achievements
Rank 1
answered on 27 Aug 2008, 04:23 AM
Thanks for your idea to help me.

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); 
    });
}
0
Laurie
Top achievements
Rank 2
answered on 09 Oct 2008, 09:41 PM
I've tried both of the scripts in this thread and neither of them works.  My IMG tag looks like this:

<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
0
Laurie
Top achievements
Rank 2
answered on 09 Oct 2008, 09:44 PM
Correction: It works if I grab an image handle and resize the image that way, but not if I use image properties to resize the image. When I say "it works" I am referring to the second script, not the first.
0
Rumen
Telerik team
answered on 10 Oct 2008, 06:48 AM
Hi Laurie,

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.
0
Laurie
Top achievements
Rank 2
answered on 10 Oct 2008, 01:56 PM

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>

 

Tags
Editor
Asked by
BlackStar
Top achievements
Rank 1
Answers by
Rumen
Telerik team
BlackStar
Top achievements
Rank 1
Laurie
Top achievements
Rank 2
Share this question
or