Detecting when your site is loaded in the Visual Editor

There may be situations where you want to show content to editors when they’re in the Visual Editor but not show it on the live site.

The Visual Editor adds the .cms-editor-active class to the body of the page. Use this to show elements that are hidden on the live site:

.editor-content {
  display: none;
}

.cms-editor-active .editor-content {
  display: block;
}

Alternatively, check window.inEditorMode with JavaScript to find out if a page is being viewed inside the Visual Editor:

if (window.inEditorMode) {
  alert('Inside CloudCannon!');
} else {
  alert('Not in CloudCannon.');
}