RadEditor for use in a CMS - CSS Questions

2 posts, 0 answers
  1. John
    John avatar
    31 posts
    Member since:
    May 2011

    Posted 01 Aug 2011 Link to this post

    I would like to use RadEditor to edit content in a CMS.

    Of course I want WYSIWYG editing using the same style sheet that I use in the website.

    From what I have read in the forums and documentation it seems that I need to create a second style sheet just for RadEditor to use.

    In my CMS system the dynamic content is in a specific container, so I hoped I could just specify the ID or class name of the container and RadEditor could use the website style sheet but this does not appear to be possible. (something like CKEDITOR's bodyClass or bodyId)

    My other option, which I have used with other editors, is to make the CSS classes that are used in the content area the default for that HTML tag. For example, if all hyperlinks in the content area are to be red then that is the default for the "A" tag and if I want any other colour outside of the content area then I apply a class name to it. This method works with RadEditor except it ruins the display of toolbars and dialogs if some attributes are changed, for example LI tags. Unfortunately the RadEditor style sheet for toolbars and dialogs don't reset a lot of CSS attributes.

    So my question is, is there a way of using RadEditor in this circumstance, without having to create a second style sheet and have to maintain two style sheets?
  2. Rumen
    Rumen avatar
    14028 posts

    Posted 04 Aug 2011 Link to this post

    Hello John,

    By default the Apply CSS class dropdown will display all global CSS styles and CSS styles that are directly related to the object - e.g. a.class for the Hyperlink Manager.

    If you put the following classes in a style tag
    <style type="text/css">
       TABLE.TABLEgreen {background-color: green;}
       td.TDyellow {background-color:yellow;}
       a.APink {background-color: pink;}
       p.ParaTagRed {background-color: red;}
       img.IMGREDred {background-color:red;}
      .DotOrange{background-color: orange;}

    they will be populated in the Apply CSS class dropdown of RadEditor (if the CssFiles property is not set):

    You can find more information in the following articles:

    It is not recommended to use global CSS classes because they will ruin the design of the editor, but there is a solution for this scenario explained in the following KB article:
    Overriding Global CSS Styles Inherited by RadEditor.

    Kind regards,
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top