Paragraph Styles Dropdown not inheriting from external css file

5 posts, 0 answers
  1. Rob
    Rob avatar
    85 posts
    Member since:
    Feb 2005

    Posted 03 Mar 2011 Link to this post

    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
  2. Rumen
    Admin
    Rumen avatar
    13949 posts

    Posted 07 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. Rob
    Rob avatar
    85 posts
    Member since:
    Feb 2005

    Posted 07 Mar 2011 Link to this post

    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
  4. Rumen
    Admin
    Rumen avatar
    13949 posts

    Posted 10 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  5. Rob
    Rob avatar
    85 posts
    Member since:
    Feb 2005

    Posted 10 Mar 2011 Link to this post

    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
Back to Top