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

Assigning a class or ID to the Editor content area

3 Answers 54 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jonathon
Top achievements
Rank 1
Jonathon asked on 07 Dec 2008, 09:08 PM

We are switching from CuteEditor to RadEditor but have one problem that I am so far unable to resolve.

We are using the RadEditor in the backend admin area to design content displayed in the front end. This content is itself dependent on url based theming. We override all the global styles for the front end editable page area by wrapping them in a div with ID/Class.

This makes it particularly easy to then display the content in the correct fashion in the backend preview areas by also wrapping them in an equivalent div. With CuteEditor, I was also able to set the Editor's content window with a class or ID which was great as the css inheritance could still be used.

I can't seem to do this with the RadEditor though (in firebug, i can achieve the desired affect by assigning the class name to the <body> tag within the editor's iframe, so I am thinking i might have to resort to some javascript to do this).

Do you have any suggestions

I am setting the appropriate css files in the code behind for the default and themed style sheets:

 

RadEditor1.CssFiles.Add(subApp.Application.FolderPath +

"/css/Default/TemplatePageContent.css");

 

RadEditor1.CssFiles.Add(

"/App_Themes/" + subApp.Theme + "/ThemedPageContent.css");

my global styles are then 
.pagetemplate a
.pagetemplate h1
.pagetemplate li  etc......


Many thanks

 

3 Answers, 1 is accepted

Sort by
0
Jonathon
Top achievements
Rank 1
answered on 08 Dec 2008, 03:14 PM
Just to nudge this up again as I posted over the weekend...

In summary, I am looking to set an ID or class on the editor content area so that it uses the css inheritance modal used elsewhere on our system. The global styles I use are imported using CssFiles.Add(...)   and should have the format  
.pagetemplate li     (or  #pagetemplate  li)

Is there a solution or better way of doing this?

cheers
0
Tervel
Telerik team
answered on 09 Dec 2008, 08:41 AM
Hello Jonathon,

Indeed, you need to use a bit of javascript to set a className to the body element of the editor's content area.
One way to do it is like this:

  <telerik:radeditor runat="server"                 
            ID="RadEditor1" OnClientLoad="OnClientLoad">                                   
                  <Content> 
                   Content... 
                  </Content>                     
           </telerik:radeditor> 
                                               
           <script> 
          function OnClientLoad(editor) 
          { 
                editor.get_document().body.className = "SomeClass";                 
          }         
           </script> 


Best regards,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Jonathon
Top achievements
Rank 1
answered on 09 Dec 2008, 02:28 PM
Yep, using OnClientLoad="..."  did the trick nicely.

Thanks.
Tags
Editor
Asked by
Jonathon
Top achievements
Rank 1
Answers by
Jonathon
Top achievements
Rank 1
Tervel
Telerik team
Share this question
or