Image height and width attributes

[Roger Withnell]

I need to adjust the height and width of an image when the editor's content is saved (to a database).

When an image is first inserted into the editor, it has no img height and width attributes nor a style defining the height or the width.

By dragging the image handles, When I adjust the size of the image in the editor the first time the img height and width attributes are added.  When I adjust it the second time, the img height and width attributes retain their original values and a style attribute is added with the new width and height values.

This makes my code to adjust the width and height values when saving the editor content to the server unnecessarily complicated.

How do I set up the editor so that it only uses one set of height and width values, preferably via the style attribute?

Thanking you in anticipation.

Roger

[Dobromir]

Hi Roger,

In order to change the width and height image attributes to the respective style attributes, when the content is saved, you need to execute a javascript function on the OnClientSubmit client-side event. In the following example I have provided a simple solution to this scenario.

function OnClientSubmit(editor) {
    var oDocument = editor.get_document(); //get a reference to the editor's document
    oImgElements = oDocument.getElementsByTagName("IMG"); //get all the IMG elements
    for (var i = 0; i < oImgElements.length; i++) {
        var currentImg = oImgElements[i];
        var imgWidth = currentImg.getAttribute("width");
        var imgHeight = currentImg.getAttribute("height");
        if (imgWidth || imgHeight) {
            if (imgHeight) {
                currentImg.removeAttribute("height");
            }
            if (imgWidth) {
                currentImg.removeAttribute("width");
            }
        } else {
            imgWidth = currentImg.offsetWidth;
            imgHeight = currentImg.offsetHeight;
        }
        currentImg.style.height = imgHeight;
        currentImg.style.width = imgWidth;
    }
}

I hope this helps.

All the best,

Dobromir
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.

[Roger Withnell]

Many thanks for your reply.

I am saving the contents of the editor to a database with the following button:

<input id="ButtonSave" type="button" Visible="false" value="Save" onclick="fnEditImg(getElementById('RadEditor1'));" runat="server" />

which first fires the fnEditImg function with which to adjust the img height and width attributes.

The function starts:

function fnEditImg(editor) {
    var jDocument = editor.get_document();

var jDocument = editor.get_document(); gives the error:

Object doesn't support this property or method.

What am I doing wrong?

Thanking you in anticipation.

Roger

[Dobromir]

Hi Roger,

RadEditor is not a simple HTML element and you can not get a reference to it with getElementById() method - you should use $find() instead:

var editor = $find("<%=RadEditor1.ClientID %>");

Information about getting reference to the RadEditor control is available in the following article:
Getting a Reference to RadEditor

Also please note that getElementById() is not a static method and can not be used as one. It should be called to an instance of a object, e.g. document.getElementById().

All the best,
Dobromir
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.

[Roger Withnell]

Thanks, Dobromir.

When I run this code:

function fnEditImg() {
    var editor = $find("<%=RadEditor1.ClientID %>");
    alert(editor.get_id());
}

I get the following error on the alert:

Error: 'null' is null or not an object.

Please advise.

Many thanks.

Roger

[Dobromir]

Hi Roger,

This error might be thrown because you are executing the mentioned function before RadEditor is loaded on the page. Note that page life cycle is window.onload -> Sys.Application.init -> Sys.Application.load and you can not get reference to RadEditor before Sys.Application.load event. If this is not the current scenario, I would like to ask you to open a support ticket and attach a simple project that reproduces this error so we can investigate it further.


All the best,
Dobromir
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.

[Roger Withnell]

Thanks for your reply, Dobromir.

I've minimised my page that still produces the error below:

<%@ Page Language="VB" AutoEventWireup="false" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
 <script type="text/javascript" language="javascript">
     function fnEditImg() {
         var editor = $find("<%=RadEditor1.ClientID %>");
         var jDocument = editor.get_document();
         var jImgElements = jDocument.getElementsByTagName("img");
         alert(jImgElements.length);
     }
</script>
   <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">
    </telerik:RadScriptManager>
        <input id="ButtonSave" type="button" value="Save" onclick="fnEditImg();" runat="server" />
        <telerik:RadEditor ID="RadEditor1" EnableResize="false"
        runat="server">
            <Content>
            </Content>
        </telerik:RadEditor>
    <telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadEditor1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadEditor1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    </form>
</body>
</html>

Many thanks for your help with this.

Roger

[Dobromir]

Hi Roger,

While I was trying to reproduce the mentioned error with the provided code I experienced a server error (The Controls collection cannot be modified because the control contains code blocks) which is related to the ASP.NET controls' rendering methods and is easily overcome by using RadCodeBlock. The javascript function works OK.

For your convenience I have attached a working demo project using provided code with the only modification - wrapped the javascript block in RadCodeBlock. Could you please modify the code to reproduce the javascript error (you have described previously) and provide the code back so I can examine it in detail?


Best wishes,
Dobromir
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.

[Roger Withnell]

Many thanks, Dobromir.

That's fixed the error I was getting as well.

Much appreciated.

Roger

[Roger Withnell]

Thanks for your very helpful code snippet, Dobromir.

My application downloads images using the width defined in the querystring like:

Handler.ashx?MediaNo=60&Width=198

so I don't want the img height and width attributes nor the style height and width properties.

You have show me how to remove the img attributes.  How do I remove the style height and width properties?  I don't want to remove the whole style attribute in case there are other properties defined within it.

Thanking you in anticipation.

Roger

[Dobromir]

Hi Roger,

In order to remove a specific style property you need to access the element's style property, and then the specific property, e.g. : document.getElementById('MyDiv').style.height. Please note this is a general JavaScript related issue that is not directly related to our controls

For example the following sample code will remove the height and width style properties:

<script type="text/javascript">
    function fixImageStyle() {
        var editor = $find("<%=RadEditor1.ClientID %>");//get reference to RadEditor
        var eDoc = editor.get_document();//get RadEditor's document
        var eImages = eDoc.getElementsByTagName('IMG');//get all the images from RadEditor's document

        for (var i = 0; i < eImages.length; i++) {
            var imgElem = eImages[i];
            imgElem.style.width = null;//remove style width
            imgElem.style.height = null;//remove style height
        }
    }
</script>
<telerik:RadEditor ID="RadEditor1" runat="server">
    <Content><img src="" style="width:100px;height:100px;border:2px solid lime;" alt=""></Content>
</telerik:RadEditor>
<input type="button" value="Remove Style Width and Height" onclick="fixImageStyle()"; />

In addition, in the following article you can find a list of the Javascript style properties that corresponds to the CSS properties: CSS Properties To JavaScript Reference Conversion

All the best,
Dobromir
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.

[Roger Withnell]

Many thanks for your help, Dobromir.

Much appreciated.

Roger