Wednesday, 13 July 2011

How to make the N2 CMS free text area a bit more "WYSIWYG"

One of my clients recently noted that it would be much nicer if when he's editing the content of his website that the free text areas look like they do when he clicks on the "Save and publish" button. In other words, he wants the editor to be more "WYSIWYG" and show the real colours, fonts, font sizes etc when he's editing.

It's actually a simple fix to make. Open your web.config  and look in the <n2> tag for the <edit> tag. You just need to add one line in there and away you go. I've highlighted it below:


<edit>
        <!-- Set checkInstallationStatus to false to disable redirect to install page -->
        <installer checkInstallationStatus="true" />
        <writers dynamic="true"/>
        <editors dynamic="true"/>
        <administrators dynamic="true"/>
        <tinyMCE cssUrl="/Content/Css/N2Edit.css" enabled="true" />
</edit>

Now you just need to add the styles you like to the N2Edit.css file and you can customise the editor so that what you edit is what you see.