Rich Text inputs

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

Astro

Bridgetown

Docusaurus

Eleventy

Gatsby

Hugo

Jekyll

Lume

MkDocs

Next.js

Nuxt

Static

SvelteKit

Custom

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

A Rich Text input lets your team members write markup content directly into your data files or front matter. Rich Text inputs have a text area for your content and a WYSIWYG toolbar for formatting your content.

You can configure the WYSIWYG toolbar for a Rich Text input the same way you configure the toolbar for the Content Editor. For more information, please read our documentation on configuring your Rich Text editors.

There are two types of Rich Text input:

• HTML
• Markdown

For each input, you can configure whether your team members are allowed to resize the text area, the initial height of the text area, the upload paths or filenames for any assets uploaded through this input, and how CloudCannon handles empty values. You can also use the general configuration options available for all inputs.

HTML#

The HTML Rich Text input provides an editing interface for HTML markup content.

You can configure a HTML input using the type key with the value html. Define the type key under your input key name within _inputs. For more information, please read our documentation on configuring your inputs.

_inputs:
  content:
    type: html

{
  "_inputs": {
    "content": {
      "type": "html"
    }
  }
}

module.exports = {
  _inputs: {
    content: {
      type: "html"
    }
  }
};

Once configured, the HTML Rich Text input will appear in the Data Editor or sidebar of the Visual or Content Editor when you add it to a data file or the front matter of a markup file.

---
content: |
  <p>This paragraph has <em>emphasis</em> and <strong>strength</strong>.</p>
  <ol>
    <li>Walk</li>
    <li>Run</li>
  </ol>
  <p>Linking to <a href="/">index</a>.</p>
---

Markdown#

The Markdown Rich Text input provides an editing interface for Markdown markup content.

You can configure a Markdown input using the type key with the value markdown. Define the type key under your input key name within _inputs. For more information, please read our documentation on configuring your inputs.

_inputs:
  top_copy:
    type: markdown

{
  "_inputs": {
    "top_copy": {
      "type": "markdown"
    }
  }
}

module.exports = {
  _inputs: {
    top_copy: {
      type: "markdown"
    }
  }
};

Once configured, the Markdown Rich Text input will appear in the Data Editor or sidebar of the Visual or Content Editor when you add it to a data file or the front matter of a markup file.

---
top_copy: |
  # Animals

  - Dogs
  - Cats

  ***Its raining cats and dogs.***
---

You may need to convert the Markdown value into HTML to use it on your site.

{% if page.markdown %}
  {{ page.markdown | markdownify }}
{% endif %}

{{ with .Params.markdown }}
  {{ . | markdownify }}
{{ end }}

For more information, please read our documentation on configuring your markdown engine.

Options#

You can configure Rich Text inputs using the options key under your input key, inside of _inputs.

_inputs:
  description:
    type: markdown
    options:
      allow_resize: false
      empty_type: 'null'
      initial_height: 200
      paths:
        dam_uploads: assets/images
        dam_uploads_filename: '[filename].[extension]'

{
  "_inputs": {
    "description": {
      "type": "markdown",
      "options": {
        "allow_resize": false,
        "empty_type": "null",
        "initial_height": 200,
        "paths": {
          "dam_uploads": "assets/images",
          "dam_uploads_filename": "[filename].[extension]"
        }
      }
    }
  }
}

[_inputs.description]
type = "markdown"

  [_inputs.description.options]
  allow_resize = false
  empty_type = "null"
  initial_height = 200

    [_inputs.description.options.paths]
    dam_uploads = "assets/images"
    dam_uploads_filename = "[filename].[extension]"

Rich Text inputs have the following options available:

Unconfigured Rich Text inputs#

In some cases, CloudCannon can still detect a Rich Text input even if you have not configured it.

CloudCannon will interpret any unconfigured input with the key name html or markdown, or that ends in _html or _markdown, as a Rich Text input.

---
sidebar_html: |
  <p>This paragraph has <em>emphasis</em> and <strong>strength</strong>.</p>
  <ol>
    <li>Walk</li>
    <li>Run</li>
  </ol>
  <p>Linking to <a href="/">index</a>.</p>
---

---
markdown: |
  # Animals

  - Dogs
  - Cats

  ***Its raining cats and dogs.***
---

This behavior is convenient if you have simple inputs, or do not want to configure inputs. It is also beneficial for new websites on CloudCannon where you have yet to create any CloudCannon-specific configuration.

Valid values#

Rich Text inputs can have multiple valid values for empty, single line, and multiline content. Here are some examples of valid values for the key html. These work for both HTML and Markdown inputs.