In Episerver 7 onwards, you may notice that the CMS injects two tags above and below all content areas. When it comes to keeping a static design in-sync with your CMS site, very often you will get broken styles and a lot of crazyness.
The extra div tags are required by Episerver in order to provide the on page editing features. This is all fine but these are also rendered in the live view, adding in extra tags that are not needed Episerver stance on the matter is that people won't want to maintain separate CSS for live and preview. If you only have a small site, the easy way is to use the built-in features and override or change the child tags Episerver creates, like so:
If you work in a company that has a very strict about mark-up, standards or you spend more time working between a static version and your CMS version then you might want to come up with a solution to completely remove it in live mode. The below bit of code does this:
Things to note about the above code, it uses ServiceConfiguration attribute. This attribute will register the class so you can use ServiceLocator.Current.GetInstance(); to get it.
The code basically goes through and if the page is in edit mode, adds in the epi specific div's. If the page is in normal view mode the tags are not rendered. In order to call the customer content area, you need to override the default content area html.
Within your View -> Shared folder. You need to create a DisplayTemplates folder and create a file called ContentArea.cshtml. This will override the default view. If you want to, you can also override things like, Paragraph.cshtml, H2.cshtml, Image.cshtml etc.. In your view, we are going to create an HTML helper that will call the custom content area code
The extension method will then look like this:
That's it! If you look in the attached website you can view the test page and the text block will not be wrapped in two divs. Enjoy :)
All the above code can be downloaded in a fully working website from my github account here. #ILoveEpiserver