Bug with image resize!

7 posts, 0 answers
  1. BlackStar
    BlackStar avatar
    15 posts
    Member since:
    Jul 2006

    Posted 26 Aug 2008 Link to this post

    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.
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 26 Aug 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. BlackStar
    BlackStar avatar
    15 posts
    Member since:
    Jul 2006

    Posted 26 Aug 2008 Link to this post

    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); 
        });
    }
  5. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 09 Oct 2008 Link to this post

    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
  6. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 09 Oct 2008 Link to this post

    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.
  7. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 10 Oct 2008 Link to this post

    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.
  8. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 10 Oct 2008 Link to this post

    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>

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017