In some cases, it may be helpful for your site to know when it’s being rendered in the CMS. The following tips can be used for various reasons to change the behavior of your site when viewed in the CMS.
If you’re using JavaScript plugins that change the HTML after your page loads, you’ll probably want to disable them in the CMS so those changes don’t get published. One way to do this is with HTML comments.
Surreal will ignore everything inside of these special comments:
<!--cms-disable-->
<script>alert('This will alert on the site but not in the CMS');</script>
<!--/cms-disable-->
For more control over your scripts, you can check the value of
window.isCMS. It will be set to true when
the page is rendered in the Live Editor.
if( window.isCMS ) {
alert('Page is being rendered in the CMS');
} else {
alert('Page is NOT being rendered in the CMS');
}
Alternatively, you can check for the presence of the is-cms
meta tag:
<meta name="is-cms" content="true" />
To check using jQuery, you can do this:
if( $('meta[name=is-cms]').length ) {
// Your page is being viewed in the CMS
} else {
// Your page is not being viewed in the CMS
}
Surreal adds a special class to the <html> element
of your page when viewed in the Live Editor. You can use this class
for CMS-specific styles. This is useful for many applications, such
as forcing hidden elements to show in the CMS so users can edit them.
Here’s an example of how it works. The CSS should be placed directly in your stylesheet:
.is-cms body {
background: red;
}
This will turn the page’s <body> red, but it will
only be visible in the CMS. The page will still render normally on
the live site.