This is a migrated thread and some comments may be shown as answers.

External CSS included in HTML

1 Answer 73 Views
Editor
This is a migrated thread and some comments may be shown as answers.
margan
Top achievements
Rank 1
margan asked on 19 Oct 2010, 12:52 PM
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?

1 Answer, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 22 Oct 2010, 10:24 AM
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
Tags
Editor
Asked by
margan
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Share this question
or