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.


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


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" />

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



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" />

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

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

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


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.