Add absolute paths to background images in tables

[Gabriel]

Hello,

Given the following sample of html:

<TABLE style="BORDER-RIGHT: #ff0000 solid; BORDER-TOP: #ff0000 solid; BACKGROUND-IMAGE: url(/images/background.jpg); BORDER-LEFT: #ff0000 solid; WIDTH: 922px; BORDER-BOTTOM: #ff0000 solid; HEIGHT: 347px">

<THEAD></THEAD>

<TBODY>

<TR>

<TD style="BORDER-RIGHT: #00b050 thin dashed; BORDER-TOP: #00b050 thin dashed; BORDER-LEFT: #00b050 thin dashed; BORDER-BOTTOM: #00b050 thin dashed">&nbsp;</TD>

<TD vAlign=top></TD>

<TD vAlign=top></TD>

<TD>&nbsp;</TD></TR>

<TR>

<TD style="BORDER-RIGHT: #00b050 thin; BORDER-TOP: #00b050 thin; BORDER-LEFT: #00b050 thin; BORDER-BOTTOM: #00b050 thin dashed">&nbsp;</TD>

<TD vAlign=top></TD>

<TD vAlign=top></TD>

<TD>&nbsp;</TD></TR></TBODY></TABLE>

 

I would like to know how to go from this:

BACKGROUND-IMAGE: url(/pathtofile/filename.jpg)

 

to this:

BACKGROUND-IMAGE: url(http://myserver/pathtofile/filename.jpg)

 

I have tried using the MakeUrlsAbsolute but didn’t get what I was looking for.

[Rumen]

Hello Gabriel,

You can use the following code that is fired on page submit to achieve your goal:

<telerik:RadEditor runat="server" OnClientSubmit="OnClientSubmit" ID="RadEditor1">
    <Content>
        <TABLE style="BORDER-RIGHT: #ff0000 solid; BORDER-TOP: #ff0000 solid; BACKGROUND-IMAGE: url(images/background.jpg); BORDER-LEFT: #ff0000 solid; WIDTH: 922px; BORDER-BOTTOM: #ff0000 solid; HEIGHT: 347px">
            <THEAD></THEAD>
            <TBODY>
                <TR>
                    <TD style="BORDER-RIGHT: #00b050 thin dashed; BORDER-TOP: #00b050 thin dashed; BORDER-LEFT: #00b050 thin dashed; BORDER-BOTTOM: #00b050 thin dashed">&nbsp;</TD>
                    <TD vAlign=top></TD>
                    <TD vAlign=top></TD>
                    <TD>&nbsp;</TD></TR>
                <TR>
                    <TD style="BORDER-RIGHT: #00b050 thin; BORDER-TOP: #00b050 thin; BORDER-LEFT: #00b050 thin; BORDER-BOTTOM: #00b050 thin dashed">&nbsp;</TD>
                    <TD vAlign=top></TD>
                    <TD vAlign=top></TD>
                    <TD>&nbsp;</TD>
                </TR>
            </TBODY>
        </TABLE>
    </Content>
</telerik:RadEditor>

<script type="text/javascript">
function OnClientSubmit(editor, args)
{
var table = editor.get_document().getElementsByTagName("table");
for (var i=0; i< table.length; i++)
{
   var table = table[i];
   var img = editor.get_document().createElement("img");
   img.src = table.style.backgroundImage.replace("url(","").replace(")","");

   table.style.backgroundImage = "url(" + img.src + ")";

}
}
</script>

<asp:Button ID="Button1" runat="server" Text="Submit" />

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.