Skip to content

Visual Editor

On this page:

Loading...

Visually navigate and edit the content on your site.

The Visual Editor is one of the main ways to manage content in CloudCannon.

Navigate to other pages by clicking links on the site.

Editing in the visual editor is configured in two ways:

  • Editable Regions - inline edit simple HTML content.
  • Editor Links - manage complex content populated from front matter, data file or somewhere else.
Screenshot of the Visual Editor with sidebar closed

Content which only shows 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:

styles.css
.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:

script.js
if (window.inEditorMode) {
  alert("Inside CloudCannon!");
} else {
  alert("Not in CloudCannon.");
}
On this page:

Loading...

Don’t miss the latest
CloudCannon news freshly delivered to your inbox