Custom CSS Style in Edit mode not taking effect

4 posts, 0 answers
  1. Dharmesh Thakkar
    Dharmesh Thakkar avatar
    1 posts
    Member since:
    Nov 2007

    Posted 07 Dec 2007 Link to this post

    We are using full featured RadEditor with custom styles. While we are able to apply the custom CSS styles to content and they do show alright on the display pages we don't see the content with right formatting in edit mode in RADEditor i.e. all content shows as basic text even though when you look at source it has the right CSS applied. Are we missing something basic here!! The very purpose of a Rich Text editor should be to show content in rich text while editing.
  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 10 Dec 2007 Link to this post

    Hello Dharmesh,

    The editor's content area is an editable IFRAME. The editable IFRAME element contains its own document context and its own BODY element that does not inherit the styles from the page.

    To apply the same CSS formatting as when the content is displayed outside of the editor, you should open the Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\4.4.1.0__1f131a624888eeed\RadControls\Editor\Skins\<your skin folder>\EditorContentArea.css file and modify the following classes meant for the editor's content area appearance:

     .RadEContent, .RadEContentBordered
     {
         // Here, by adding the following properties, you can change the font and it size accordingly to your needs:
         font-family
    : Arial, Verdana, Tahoma;
         font-size: 10pt;
         backgrdound-color: red;

     }

    To see the applied changed save the EditorContentArea.css file and restart your browser.

    Best regards,
    Rumen
    the Telerik team

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

  3. Monika Flanagan
    Monika Flanagan avatar
    1 posts
    Member since:
    Jan 2008

    Posted 07 Feb 2008 Link to this post

    Hello there,

    We have exactly the same problem and your answer really surprises me, as the MOSS Editor has no issue with this. We have a number of long and complex CSS Files (CSS Layout) and maintaining the styles in 2 places isn't an option. Isn't there a way to configure the editor to read the styles from the masterpage? Thanks.
  4. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 07 Feb 2008 Link to this post

    Hi Monika,

    RadEditor reads and copies the styles from the MasterPage. All you need to do is to set the


    .RadEContent, .RadEContentBordered
    {
        background-color: Red;
        color: White;
        font-size: 20px;
    }

    classes in the external css file that you set with a LINK tag in the master page and you will be able to customize the content area appearance of RadEditor. For your convenience I have attached a video demonstrating this feature as well as my test project.


    Best regards,
    Rumen
    the Telerik team

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