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

changing background image

4 Answers 352 Views

Editor

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

chris asked on 16 Jun 2009, 07:39 PM

We have a Wedding invitation. And we want to use the RADEditor to customize the text. So we want to load an image upon which the user can type and customize fonts, size etc through the toolbar. This works very nice if I add

body
{
background-color: Transparent !important;
background: url("myImage.jpeg");
}

RadEditor1.ContentAreaCssFile = "myStyle.css"

to my css file. However, I need to changed the image dynamically, so I can't use the css file.

I tried also:

function OnClientLoad( editor, args){
var style = editor.get_contentArea().style;
style.backgroundimage = "myImage.jpeg";

or from aspx.cs file:

RadEditor.Style["background-image"] = "myImage.css";

and some other things but can't effect any change outside changing the css file. I have configured the Editor to behave like a text box and the toolbar to float. The other thought was to make the Editor transparent so I can place it over another control, panel or img, and load the image there, but I can't get the editor to render transparent.

I have just recently downloaded the evaluation version, we are testing it to see if this will work for us, but I can't seem to get past this. Any help either 1) dynamically loading the image from code behind; or 2) rendering the content area truly transparent so the image from another control is visible.

I have read most of the threads I could find regarding these issues, and understand the concepts and tools, but can't seem to find a solution.

Thanks for your time,
Chris

4 Answers, 1 is accepted

answered on 17 Jun 2009, 08:13 AM

Hello chris,

The correct syntax for set a background image using JavaScript is the following one:

    
            <script type="text/javascript"> 
        
            function OnClientLoad( editor, args) 
        
            { 
        
                var style = editor.get_contentArea().style; 
        
                style.backgroundImage = "url(myImage.jpeg)"; 
        
            } 
        
            </script> 
        
            <telerik:RadEditor id="RadEditor1" OnClientLoad="OnClientLoad" Runat="server"></telerik:RadEditor>

This works as expected on my side and set the image as a background for RadEditor's content area.

You can also see how to make the editor transparent in this KB article: Setting a transparent background to RadEditor.

Sincerely,
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.

answered on 23 Jun 2009, 06:33 AM

Hi Chris,

Here is an example on how to set the background image depending on the logged user through the codebehind:

Default.aspx:

    
            <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                    <telerik:RadEditor id="RadEditor1" Runat="server"></telerik:RadEditor>  
        
                </form> 
        
            </body> 
        
            </html>

Default.aspx.cs:

    
            using System; 
        
            using System.Data; 
        
            using System.Configuration; 
        
            using System.Web; 
        
            using System.Web.Security; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using System.Web.UI.WebControls.WebParts; 
        
            using System.Web.UI.HtmlControls; 
        
            using System.IO; 
        
            using Telerik.Web.UI; 
        
            using System.Collections; 
        
            public partial class _Default : System.Web.UI.Page  
        
            { 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                    string user = "Peter";  
        
                    string imgSrc = "myImage.jpeg"; 
        
                    //make a check for the logged user and depending on its status set the desired image url 
        
                    string script = @"
        
                    <script language ='javascript'>
        
                    function OnClientLoad(editor)
        
                    {
        
                            var style = editor.get_contentArea().style; 
        
                            style.backgroundImage = 'url(" + imgSrc + @")'; 
        
                    }
        
                    </script>"; 
        
                    Page.ClientScript.RegisterClientScriptBlock(GetType(), "CommentScript", script, false); 
        
                    RadEditor1.OnClientLoad = "OnClientLoad"; 
        
                } 
        
            }

Using the Page.RegisterClientScriptBlock server method you can import client script to the page from the server.

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.