[Solved] RadEditor for MOSS: Content Area Styles

[Alexander]

Hi everybody

I have an issue with my brand new telerik asp.net ajax radeditor.

I use this one in a moss-environment on a highly customized website.
Telerik works (the output is correct), but in edit-mode, it doesn't use the styles it is supposed to.
In fact, it doesn't use any styles at all but displays the text "nude".

I want either telerik to use the styles, that are used around him, or at least style the content-area in edit-mode seperatly with NO EFFECT on the rest of the page in non-edit mode.

I was able to do the latter when using telerik 4.5.2.. RadEditor lite, by adding the following code to the file:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\4.5.1.0__1f131a624888eeed\RadControls\Editor\Skin\<skin name>\EditorContentArea.css  BODY {     font-family: Arial, sans-serif !important;     font-size: 11px !important;     color:#53361b !important;  background:#efe9d3 !important; }

Now, with the new version, the folder doesn't exist anymore and I haven't found a way to style the content-area.
I'm a bit lost in the jungle of different approaches in different telerik versions which are used in different environments.

I hope someone can help.

Tia
Alexander

[Rumen]

Hi Alexander,

RadEditor offers the ability to easily apply various styles to its content area by setting the CssFiles property to point to an external css file and manually specify the classes that you want to load in the editor. For example to set the editor to use white text on a black background set the CssFiles property to point to an external css file (you can name it EditorContentArea.css) with the following body class:

body
{
    color: white;
    background-color: black;
    padding:3px;
    background-image: none;
    margin: 0px;
    text-align: left;
}

Depending on your scenario Web Part and WCM / SharePoint forms scenario (Lists, Wikis, Blogs, etc.) you have to modify the ToolsFile.xml / ListToolsFile.xml, which is located in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources/ folder like follows:

<root>
 ...........
 <cssFiles>
    <item name="/_wpresources/RadEditorSharePoint/EditorContentArea.css " />
  </cssFiles>
  ..........
</root>

Sincerely,
Rumen
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Alexander]

Hi Rumen

Thank you very much. I tried this, and it takes effect.
The problem now is, that the Css-Classes I defined in ToolsFile.xml are not appearing in the "Apply CSS Style"-Box.
I defined the styles for this box in CssEditor.css. I tried to link this file the same way (as you describe it) and I also tried to copy all the required styles into the new EditorContentArea.css, but none of theese things work. The Apply-CSS-Class remains empty.

When I remove the <cssFiles>-block fropm toolsfile.xml, the apply-css-class-dropdown works again.

I have the feeling something is wrong with my approach...

Regards
Alexander

[Rumen]

Hello Alexander,

The problem is odd because all the classes defined in the css file (EditorContentArea.css) loaded via the CssFiles property should be listed in the Apply Class dropdown. Could you please put the desired classes in the EditorContentArea.css file and restart your browser? After that see whether they are populated in the dropdown.

If this does not work, then remove the CssFiles declaration from the toolsfile and put the global body class in the CssEditor.css file:

body
{
    color: white !important;
    background-color: black !important;
    padding:3px !important;
    background-image: none !important;
    margin: 0px !important;
    text-align: left !important;
}

Note the added !important rule in the properties values.

After that clean the browser cache, restart the browser and load the page with the editor.

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Alexander]

Hi Ruben

It works! Thank you very much.
Now i have everything in the EditorContentArea.css-File.

Regards
Alexander