External CSS included in HTML

2 posts, 0 answers
  1. margan
    margan avatar
    17 posts
    Member since:
    Oct 2010

    Posted 19 Oct 2010 Link to this post


    The problem looks like this:
    RadEditor has external css content registered like this:
       <telerik:EditorCssFile Value="~/Styles/OdpowiedzListEditorContentAreaStyles.css" />
    And CSS file looks like this:

        background-color: White !important;
        font-family: RotisSemiSansPl !important;
        font-size: 20pt !important;
        margin: 50pt 0pt 10pt 0pt !important;
        color: red !important;

    My problem is that On the design view everything is ok and the styles are applied, but they aren't added to the html view. So When I save the HTML to my database all the formatting is gone. Is there a way to include those styles in the html?
  2. Dobromir
    Dobromir avatar
    1633 posts

    Posted 22 Oct 2010 Link to this post

    Hi Margan,

    This is expected behavior of RadEditor. The main purpose of the CssFiles collection is to load external css files inside the content area to provide decoration that match the page where the content will be displayed. By design, RadEditor's content area is an editable <iframe>, thus the content is a different document, and when submitter RadEditor's Content property provides only the content of the <body> tag. You can find more information regarding CssFiles collection in the following help article:
    External CSS Files

    It is possible to save the <link> tags along with the content by manually extracting them from the <head>, e.g.:
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientSubmit="OnClientSubmit">
    <script type="text/javascript">
        function OnClientSubmit(editor, args)
            var oDoc = editor.get_document();//get reference to the content area's document
            var oHead = oDoc.getElementsByTagName("head")[0];//get reference to the head element
            var currentContent = editor.get_html(true);
            var newContent = "";
            var links = oHead.getElementsByTagName("link");//get registered link elements
            var linksHtml = "";
            for (var i = 0; i < links.length; i++)
                linksHtml += $telerik.getOuterHtml(links[i]);
            newContent = linksHtml + currentContent;

    however, please note that inserting <link> tags inside the <body> is not XHTML compliant markup.

    Best wishes,
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
Back to Top