Configure your rich text editors

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:

1. Navigate to your global configuration file and open it in the Source Editor.
2. Identify the _editables key, or create one at the top level of your configuration file.
3. Add the content key under _editables.
4. Add any keys you want to configure under the content key.
5. 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:

_editables:
  content:
    bold: true
    italic: true
    underline: true

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

Rich Text inputs#

To configure your Rich Text inputs:

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

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

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

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:

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

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

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

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

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

Text alignment#

Text alignment controls are available in the Content Editor, block editable regions, and Rich Text inputs. To enable them, add the align key to your rich text editor configuration and set each alignment you want to offer to true.

CloudCannon saves alignment as a text-align style on the block of text (e.g., <p style="text-align: center;">⁠). Use the default key to name the alignment your CSS already applies. Selecting the default alignment in the WYSIWYG toolbar removes any existing alignment from the block rather than saving a style for it.

_editables:
  content:
    align:
      default: left
      left: true
      center: true
      right: true
      justify: false

{
  "_editables": {
    "content": {
      "align": {
        "default": "left",
        "left": true,
        "center": true,
        "right": true,
        "justify": false
      }
    }
  }
}

If your site aligns text with class names rather than inline styles, add them under the classes key. CloudCannon will toggle the class name for each alignment instead of saving a text-align style. Any alignment without a class name falls back to the text-align style. Define the class names in the CSS file you set with the styles key so that the alignment is visible in the editor.

_editables:
  content:
    styles: /css/editor.css
    align:
      default: left
      left: true
      center: true
      right: true
      classes:
        left: align-left
        center: align-center
        right: align-right

{
  "_editables": {
    "content": {
      "styles": "/css/editor.css",
      "align": {
        "default": "left",
        "left": true,
        "center": true,
        "right": true,
        "classes": {
          "left": "align-left",
          "center": "align-center",
          "right": "align-right"
        }
      }
    }
  }
}

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

The align key replaces the deprecated left, center, right, and justify keys, which each took a class name. Existing configuration using those keys continues to work. To migrate, move each class name under align.classes, set the matching alignment to true, and set default to left.