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
    italics: true
    underline: true

{
  "_editables": {
    "content": {
      "bold": true,
      "italics": 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
      italics: true
      underline: true

{
  "_inputs": {
    "example": {
      "type": "html",
      "options": {
        "bold": true,
        "italics": 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
    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

{
  "_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"
      ]
    }
  }
}

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>