help.axcms.netAxinom Logo
Save Save Chapter Send Feedback
KB10048: Text looks in the text editor differently as in the preview mode
Put all the CSS formatting information into external CSS-files rather than directly into the template.

SYMPTOMS

Text in a placeholder opened in the editor looks differently as in the preview mode.

CAUSES

A possible cause is the usage of CSS styles directly in the template, instead of in external .css-files. For example:

<div style=”….”>
<Axinom:AxContentPlaceholder runat="server" ID="basePlaceholder" />
</div>

The text editor loads all the css-files defined in the template, but not the inline styles.

SOLUTION

 

Extract all CSS-related information into .CSS-files and add them to the template using link-element:

 

<head id="headTag" runat="server">
<link href="~/templates/CSS/myCss.css" runat="server" rel="stylesheet"
type="text/css" />
</head>

Define the classes available for the editor with HTML-rules in CmsSite.xml under <HtmlRules>. 

<HtmlRules>
        <HtmlRule axid="default" tags="STRONG,BR,OL,UL,LI,EM,U,HR">
           <Tag name="SPAN" styles="default" /> 
           ...       
           </HtmlRule>   
           <StyleDefinition axid="default" values="">
                  <Value value="borderheadline"
ribbonImage="/images/RibbonImages/Styles/borderHeadline.png" />
           <Value value="headline" ribbonImage="/images/RibbonImages/Styles/headline.png" />
            ...
        </StyleDefinition>
   </HtmlRules>

You can even attach an icon for every class – the icons will be shown then in the ribbon toolbar (attribute ribbonImage above):

MORE INFORMATION:

What you see in the editor is pretty much the same what you see on the page, but it is not 100% the same – it has a different context, it sits in a different HTML page (otherwise you cannot edit the text with a fancy editor). It means that there are chances – in spite of all our efforts – that there will be some visual differences, which an Editor has to accept.