Reopen your global configuration file#
In the previous section of this guide, we created our CloudCannon configuration file, cloudcannon.config.yml
. The sidebar prompt to create the configuration file has disappeared.
To edit your configuration file further, you can do so manually through the Files tab or by reopening the configuration GUI.
Access the configuration GUI by navigating to the Editing tab, under Site Settings. Click the Edit your global configuration file button.
Markdown WYSIWYG toolbar#
Markdown is used in the Content, Visual, and Data Editors. The Content Editor is a rich text editor for Markdown files. The Visual Editor can edit Markdown files if they are wrapped in an HTML element. Markdown is also used in the Data Editor if you have a rich text area for one of your inputs. To customize your experience using these editors, you should configure your WYSIWYG toolbar.
Let’s go over an example of how you would customize the toolbar. We want to allow our content team to add a table to Markdown files. In our global configuration file, we have complete control over the WYSIWYG toolbar.
You can define the _editables
for each editor type in the global configuration file. These sections look like this in the configuration GUI:
![Configuration GUI Editables Section A screenshot of the CloudCannon configuration GUI shows the section allowing users to configure the toolbar for each editor.](https://cc-dam.imgix.net/documentation/CloudCannon-Getting-Started-Configure-Editables.png)
Select all the editable options you would like in your WYSIWYG toolbar.
When you have created your CloudCannon global configuration file, your _editables
will look something like this:
_editables:
content:
bold: true
italic: true
bulletedlist: true
numberedlist: true
image: true
table: true
undo: true
redo: true
{
"_editables": {
"content": {
"bold": true,
"italic": true,
"bulletedlist": true,
"numberedlist": true,
"image": true,
"table": true,
"undo": true,
"redo": true
}
}
}
module.exports = {
_editables: {
content: {
bold: true,
italic: true,
bulletedlist: true,
numberedlist: true,
image: true,
table: true,
undo: true,
redo: true
}
}
};
As you can see, we have enabled many of the common functions your team would expect in a content editor. But that’s not all! Check out our documentation for many more ways to configure the WYSIWYG toolbar.
Front matter#
Inputs in the front matter are automatically available in the sidebar in the Visual Editor, Content Editor, and the dedicated Data Editor. Your content team will interact with these often, so let’s explicitly configure the front matter.
---
background: "#ff0000"
hero_content: "Everything you need"
sidebar: true
---
We want team members to have the following inputs for each of these keys:
- background — color picker
- hero_content — WYSIWYG Markdown editor
- sidebar — checkbox
To achieve this, we should add the following to our global configuration file using the configuration GUI:
_inputs:
background:
type: color
comment: Defines the background for the entire page
hero_content:
type: markdown
label: Hero text
sidebar:
type: checkbox
hidden: true
{
"_inputs": {
"background": {
"type": "color",
"comment": "Defines the background for the entire page"
},
"hero_content": {
"type": "markdown",
"label": "Hero text"
},
"sidebar": {
"type": "checkbox",
"hidden": true
}
}
}
module.exports = {
_inputs: {
background: {
type: "color",
comment: "Defines the background for the entire page"
},
hero_content: {
type: "markdown",
label: "Hero text"
},
sidebar: {
type: "checkbox",
hidden: true
}
}
};
You will also see that we added some other elements to our keys:
- A comment to describe the function of the input.
- A label to name the input in the Data Editor.
- A hidden status to prevent the input from appearing in the Data Editor.
Adding a label and a comment to each input is considered best practice.
We covered inputs in the previous section of our guide, and you can always check out our documentation for customizing your inputs to see more options.
Here’s what our new inputs will look in the Data Editor:
![Adding inputs to front matter A screenshot of the CloudCannon app shows a blog in the Content Editor with configured inputs from the front matter visible.](https://cc-dam.imgix.net/documentation/CloudCannon-Getting-Started-Front-Matter.png)
If you want to update front matter content in the Visual Editor rather than the Data Editor sidebar, you can set up Visual Data binding. Visual Data binding is an HTML attribute indicating which front matter property populates an HTML element. For example, the HTML class below will open an overlay to edit the title property in the front matter.
<h1 data-cms-bind="#title">{{title}}</h1>
Data files#
Data files are automatically available to update in the Data Editor. The same inputs configuration you used for the front matter will also work on data files.
Snippets#
It is easy to supplement your Markdown content with React components, building an interactive page editing experience for you team — all without touching the underlying code. Snippets are structured components which you can create and edit to suit your needs. You can create your own custom Snippets with our Custom MDX Components guide, but for now let’s import the default MDX Snippets configurations.
Currently, you cannot configure Snippets through the Configuration GUI, however, it is easy to do manually. Navigate to your CloudCannon global configuration file through the Files tab in your navigation sidebar. The configuration file will be in the root of your directory.
Docusaurus uses both regular MDX components along with custom extensions, so we can import both the mdx
Snippets and the docusaurus_mdx
Snippets.
Your _snippets_imports
should look something like this:
_snippets_imports:
mdx: true
docusaurus_mdx: true
{
"_snippets_imports": {
"mdx": true,
"docusaurus_mdx": true
}
}
module.exports = {
_snippets_imports: {
mdx: true,
docusaurus_mdx: true
}
};
For more information, check out our Docusaurus Components documentation.
Markdown engine#
Your Markdown engine will process Markdown into HTML, making it editable. You can use any Markdown engine when building your site; this only covers the Markdown content you edit inside CloudCannon.
CloudCannon supports the CommonMark and Kramdown specifications. These implementations are markdown-it
(JavaScript) and kramdown
(Ruby). markdown-it
is the default Markdown processor in CloudCannon.
Currently, you cannot configure the Markdown engine through the Configuration GUI, however, it is easy to do manually. Navigate to your CloudCannon global configuration file through the Files tab in your navigation sidebar. The configuration file will be in the root of your directory.
Your generator
code should look something like this:
generator:
metadata:
markdown: markdown-it
markdown-it:
html: true
linkify: true
{
"generator": {
"metadata": {
"markdown": "markdown-it",
"markdown-it": {
"html": true,
"linkify": true
}
}
}
}
module.exports = {
generator: {
metadata: {
markdown: "markdown-it",
"markdown-it": {
html: true,
linkify: true
}
}
}
};
The default configuration is { html: true }
to allow the images with width and height attributes the Rich Text editors create. However, you can update this to match your site by setting the generator.metadata
in your global configuration file as shown above.