Configure your rich text editors

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

You can configure your rich text editors to control which text and image formatting tools are available in the WYSIWYG toolbar, the upload paths or filenames for any assets uploaded through an editor, and how CloudCannon should handle custom markup.

There are multiple ways to configure your rich text editors, depending on which editor you want to configure: the Content Editor, editable regions in the Visual Editor, or Rich Text inputs.

For a complete list of options available for rich text editors, please read our rich text editor reference.

The Content Editor#

To configure your Content Editor:

Navigate to your global configuration file and open it in the Source Editor.
Identify the _editables key, or create one at the top level of your configuration file.
Add the content key under _editables.
Add any keys you want to configure under the content key.
Save your changes to the global configuration file.

Let's walk through an example. We want to allow our team members to be able to apply bold, italic, and underline formatting to text in the Content Editor. The global configuration file should look like this:

cloudcannon.config.yaml

copied

_editables:
  content:
    bold: true
    italics: true
    underline: true

Configure the Content Editor and all editable regions under the _editables key anywhere in the configuration cascade.

Configuration options for the Content Editor are nested keys under content. As soon as you define one key, CloudCannon will interpret any omitted keys as false and disable those options.

cloudcannon.config.json

copied

{
  "_editables": {
    "content": {
      "bold": true,
      "italics": true,
      "underline": true
    }
  }
}

Configure the Content Editor and all editable regions under the _editables key anywhere in the configuration cascade.

Configuration options for the Content Editor are nested keys under content. As soon as you define one key, CloudCannon will interpret any omitted keys as false and disable those options.

cloudcannon.config.cjs

copied

module.exports = {
  _editables: {
    content: {
      bold: true,
      italics: true,
      underline: true
    }
  }
};

Configure the Content Editor and all editable regions under the _editables key anywhere in the configuration cascade.

Configuration options for the Content Editor are nested keys under content. As soon as you define one key, CloudCannon will interpret any omitted keys as false and disable those options.

Rich Text inputs#

To configure your Rich Text inputs:

Navigate to your global configuration file and open it in the Source Editor.
Identify the _inputs key, or create one at the top level of your configuration file.
Enter the key name for your input under the _inputs key.
Add the options key under your input name.
Add any keys you want to configure under the options key.
Save your changes to the global configuration file.

cloudcannon.config.yaml

copied

_inputs:
  example:
    type: html
    options:
      bold: true
      italics: true
      underline: true

Configure a Rich Text input under the _inputs key anywhere in the configuration cascade.

Enter the key name of the input here. In this example, the input name is example.

This input is an HTML Rich Text input. For more information, please read our documentation on Rich Text inputs.

Configuration options for the Rich Text inputs are nested keys under options.

cloudcannon.config.json

copied

{
  "_inputs": {
    "example": {
      "type": "html",
      "options": {
        "bold": true,
        "italics": true,
        "underline": true
      }
    }
  }
}

Configure a Rich Text input under the _inputs key anywhere in the configuration cascade.

Enter the key name of the input here. In this example, the input name is example.

This input is an HTML Rich Text input. For more information, please read our documentation on Rich Text inputs.

Configuration options for the Rich Text inputs are nested keys under options.

cloudcannon.config.cjs

copied

module.exports = {
  _inputs: {
    example: {
      type: "html",
      options: {
        bold: true,
        italics: true,
        underline: true
      }
    }
  }
};

Configure a Rich Text input under the _inputs key anywhere in the configuration cascade.

Enter the key name of the input here. In this example, the input name is example.

This input is an HTML Rich Text input. For more information, please read our documentation on Rich Text inputs.

Configuration options for the Rich Text inputs are nested keys under options.

Editable regions#

There are four types of editable regions in the Visual Editor:

text for inline editable regions (e.g. <p> or <h1>)
block for block editable regions (e.g. <div> or <section>)
link for inline editable regions on <a> tags
image for image editable regions (i.e. <img>)

To configure your editable regions:

Navigate to your global configuration file and open it in the Source Editor.
Identify the _editables key, or create one at the top level of your configuration file.
Add the key for the type of editable region under _editables (i.e., text, block, link, or image).
Add any keys you want to configure under the editable region key.
Save your changes to the global configuration file.

cloudcannon.config.yaml

copied

_editables:
  text:
    bold: true
    italics: true
    underline: true
  block:
    format: p h3
    undo: true
    redo: true
  link:
    bold: true
    italics: true
    underline: true
  image:
    mime_type: image/png
    allowed_sources:
      - site-files

Configure the Content Editor and all editable regions under the _editables key anywhere in the configuration cascade.

Configuration options for the text editable regions are nested keys under text.

Configuration options for the block editable regions are nested keys under block.

Configuration options for the link editable regions are nested keys under link.

Configuration options for the image editable regions are nested keys under image.

cloudcannon.config.json

copied

{
  "_editables": {
    "text": {
      "bold": true,
      "italics": true,
      "underline": true
    },
    "block": {
      "format": "p h3",
      "undo": true,
      "redo": true
    },
    "link": {
      "bold": true,
      "italics": true,
      "underline": true
    },
    "image": {
      "mime_type": "image/png",
      "allowed_sources": [
        "site-files"
      ]
    }
  }
}

Configure the Content Editor and all editable regions under the _editables key anywhere in the configuration cascade.

Configuration options for the text editable regions are nested keys under text.

Configuration options for the block editable regions are nested keys under block.

Configuration options for the link editable regions are nested keys under link.

Configuration options for the image editable regions are nested keys under image.

cloudcannon.config.cjs

copied

module.exports = {
  _editables: {
    text: {
      bold: true,
      italics: true,
      underline: true
    },
    block: {
      format: "p h3",
      undo: true,
      redo: true
    },
    link: {
      bold: true,
      italics: true,
      underline: true
    },
    image: {
      mime_type: "image/png",
      allowed_sources: [
        "site-files"
      ]
    }
  }
};

Configure the Content Editor and all editable regions under the _editables key anywhere in the configuration cascade.

Configuration options for the text editable regions are nested keys under text.

Configuration options for the block editable regions are nested keys under block.

Configuration options for the link editable regions are nested keys under link.

Configuration options for the image editable regions are nested keys under image.

Alternatively, you can configure options directly on the element with a JSON value in the data-cms-options attribute.

page.html

copied

<p class="editable" data-cms-options='{ "bold": true, "italic": true, "underline": true}'>
  ...
</p>

Configure your rich text editors

The Content Editor#

Rich Text inputs#

Editable regions#

Related Articles