Paragraph Styles Dropdown not inheriting from external css file

[Rob]

I'm loading a tools file, then custom (external) css into my editor programatically.  The Apply CSS Class dropdown properly picks up the external styles, but the Paragraph Style dropdown does not pick up the styles from the "H" tags.  How to I display the "Heading 1" text in the dropdown as the appropriate style as shown in your demo, without writing a style block to the page that contains the editor or putting the inline style in the tools file as shown in your example?

Thanks
Chuck

[Rumen]

Hello Chuck,

The RadEditor's content area is an IFRAME element which is another document different from the document of the page. Please note that the CssFiles or ContentAreaCssFile properties apply classes from external css file only to the content area of RadEditor but not to the FormatBlock dropdown, which is part of the main page. The Apply Class dropdown just lists the styles from the specified file or from the main page.

The FormatBlock tool of RadEditor is part of the page and it does not have access to the styles applied only to the content area of RadEditor. That is why for example the Heading items in the dropdown does not look like the Headings in the content area.

If you remove the CssFiles property then the editor will automatically copy the classes from the parent page. So if you set a global H1 tag on the page then it will be applied to the FormatBlock h1 item as well as to the h1 formatted content in the content area:

<style type="text/css">
H1 { color: red; }
</style>

You can find other ways to style the FormatBlock items in this live example: Paragraph Styles.

Kind regards,
Rumen
the Telerik team

[Rob]

Rumen - Thank you for your excellent description of how this is working.  It is much more clear to me why it doesn't work, however we seem to remember the paragraph styles working in the ASP.NET (non ajax) editor control.  Any reason as to why the behavior is different?

Secondly, do you have any recommendations as to how we can make this work?  Once we apply the style to the text in the content, the proper css is applied, but our customers would like to see a preview in the drop down prior to applying the heading style. 

Thanks
Chuck

[Rumen]

Hi Chuck,

The Format Block will pick up the styles for Heading tags from external stylesheet if the file is loaded on the page through a link tag:

<link href="FormatBlockStyles.css" rel="stylesheet" type="text/css" /> 

You can see my test in the following video: http://screencast.com/t/0SxvshQGkj.

For your convenience I have also attached my test project.

Regards,
Rumen
the Telerik team

[Rob]

Thanks Rumen for the suggestion, but adding a link would override the styles of our administration portal.  We solved the problem by querying the style sheet from the remote site and parsed out the h# styles we needed.  I will work in the next several days to put together a code sample for the community.

Chuck