The Visual Editor API is designed for experienced CloudCannon developers. If you need help with custom integrations or your CloudCannon setup in general, please contact our friendly support team.
Your website can detect whether it is loaded in a web browser or CloudCannon's Visual Editor CloudCannon's visual editing interface provides a user-friendly way of updating your website files on an interactive preview of your webpage. You can navigate around your website preview using links/buttons, as you would on the live version, and edit your content inline on the page, or with the data panel or sidebar. What you see in the Visual Editor is what your website visitors will see on your live webpages.Visual Editor
This article assumes you have a CloudCannon Site with the Visual Editor configured. For more information, please read our documentation on what Visual Editing is. For a complete list of API objects and methods, please read our reference documentation on the Visual Editor API.
CSS class#
CloudCannon adds the .cms-editor-active class to the <body> element of your page when the Visual Editor opens your website page. You can use this class to show or hide elements with CSS, without any JavaScript, by combining it with another CSS class.
Pick a class name and add it to the HTML elements you want hidden on the live Site but visible in the Visual Editor. The example below uses .example-class.
To use a CSS class to conditionally show elements in the Visual Editor:
- Open your website files in your local development environment.
- Add the following rules to your CSS file.
.example-class {
display: none;
}
.cms-editor-active .example-class {
display: block;
}Elements with that class will appear in the Visual Editor after the iframe loads, and stay hidden on your live Site.
JavaScript flag#
When you open a file in the Visual Editor, CloudCannon injects a script that sets CloudCannon's Visual Editor API is a public JavaScript API for building custom integrations with the Visual Editor. It lets you run your own code inside the Visual Editor to read and write content, listen for changes, and upload files using code running inside your website files.window.inEditorMode to true in the document before loading it into the iframe. The flag is available before your own scripts run. Use it for Visual-Editor-only logic such as initializing the Visual Editor APIVisual Editor API
To run code in the Visual Editor with a JavaScript flag:
- Open your website files in your local development environment.
- Add the following
ifguard around the Visual-Editor-only code in your scripts.
if (window.inEditorMode) {
// Your Visual Editor API code here
}Once you can detect the Visual Editor, you can initialize the Visual Editor API to read and write content, listen for changes, and build custom integrations.