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

    Hi,

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

    body
    {
        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
    Admin
    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">
    </telerik:RadEditor>
     
    <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;
            editor.set_html(newContent);
        }
    </script>

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

    Best wishes,
    Dobromir
    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. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top