Custom styles stripped out

[Nigel Hertz]

Hi there,

I'm having a couple of issues with the Full-featured RAD editor for MOSS. I am inserting snippets of the relevant files here for further info.


Firstly, the 'Apply CSS Class' dropdown is enabled, however the list is empty, except for 'Clear Styles' and northing I do seems to populate this list.

Secondly, when editing a page (using WCM publishing site) I can change the paragraph style etc using the dropdowns, however it doesn't update the wysiwyg viewer - the text stays the same. (Unless I remove all my custom headings etc and use the default, which defeats the purpose)

Thirdly, as soon as I save the page, it strips all custom styles out of the page (see below)

Any help would be appreciated.


**Before saving**
<p><nh1>Annual Reports </nh1></p>

**After saving**
<p><nh1 />Annual Reports </p>


**ConfigFile.xml**
<property name="CssFiles">
<item>/_wpresources/RadEditorSharePoint/4.5.0.0__1f131a624888eeed/RadControls/Editor/CssEditor.css</item>
</property>

**Toolsfile.xml**
</tools>
<paragraphs>
         <paragraph name="&lt;nh1>Heading 1&lt;/nh1>" value="&lt;nh1>" />
         <paragraph name="&lt;nh2>Heading 2&lt;/nh2>" value="&lt;nh2>" />
         <paragraph name="&lt;nh3>Heading 3&lt;/nh3>" value="&lt;nh3>" />
</paragraphs>

**CssEditor.css**
nh1
{
 font-family: Verdana;
 font-weight: bold;
 font-size: 12pt;
 background: transparent;
 color: #000066;
}
nh2
{
 font-family: Verdana;
 font-weight: bold;
 font-size: 11pt;
 background: transparent;
 color: #000066;
}
nh3
{
 font-family: Verdana;
 font-weight: bold;
 font-size: 10pt;
 background: transparent;
 color: #000066;  /* dark blue  */
}

[Rumen]

Hi Nigel,

Straight to the points:

1. The Apply Class dropdown works only with class selectors (.className) but not with global classes such as (BODY, SPAN, TABLE). To populate your custom css classes you should make them class selectors by setting a . point symbol before their names, e.g.
   
   .nh1
   {
    font-family: Verdana;
    font-weight: bold;
    font-size: 12pt;
    background: transparent;
    color: #000066;
   }
   .nh2
   {
    font-family: Verdana;
    font-weight: bold;
    font-size: 11pt;
    background: transparent;
    color: #000066;
   }
   .nh3
   {
    font-family: Verdana;
    font-weight: bold;
    font-size: 10pt;
    background: transparent;
    color: #000066;  /* dark blue  */
   }
2. I tried to reproduce the problem by using your global styles nh1, nh2, nh3 but unfortunately to no avail:
   nh1
   {
    font-family: Verdana;
    font-weight: bold;
    font-size: 12pt;
    background: transparent;
    color: #000066;
   }
   nh2
   {
    font-family: Verdana;
    font-weight: bold;
    font-size: 11pt;
    background: transparent;
    color: #000066;
   }
   nh3
   {
    font-family: Verdana;
    font-weight: bold;
    font-size: 10pt;
    background: transparent;
    color: #000066;  /* dark blue  */
   }
   Nevertheless, it is not a good solution to custom tags to a selection because the browser supports only valid HTML tags. Please, see my explanation in point 3.
   
3. Please, note that <nh1> is not a valid HTML tag and the browser Rich Text Editing engine does not handle it correctly.
   
   My suggestion is to make your global nh1, nh2, nh3 classes class selectors as it is shown in point 1 and  apply them to the format block elements in the dropdown with the following code:
   
     <paragraphs>
       <paragraph name="&lt;nh1>Heading 1&lt;/nh1>" value="&lt;h1 class='nh1'>" />
       <paragraph name="&lt;nh2>Heading 2&lt;/nh2>" value="&lt;h2 class='nh2'>" />
       <paragraph name="&lt;nh3>Heading 3&lt;/nh3>" value="&lt;h3 class='nh3'>" />
     </paragraphs>

For your convenience I have attached a video demonstrating my test. I hope this will help you to achieve your scenario.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Nigel Hertz]

Hi Rumen,

Thanks for the tips - will take a look at them today.