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 the type (HTML or Markdown), whether your team members are allowed to resize the text area, how CloudCannon saves an empty value, the initial height of the text area, and the upload paths or filenames for any assets uploaded through this input.

HTML#

The HTML Rich Text input stores all markup values as HTML. There are two ways to configure an HTML Rich Text input: using the type key or the CloudCannon key naming convention.

Using the type key, you can define your input as an HTML Rich Text input with the “html” value. 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"
    }
  }
}

[_inputs.content]
type = "html"

---
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>
---

Using the key naming convention, CloudCannon will interpret any input key named html or that ends in _html as an HTML 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#

The Markdown Rich Text input stores all markup values as Markdown. There are two ways to configure a Markdown Rich Text input: using the type key or the CloudCannon naming convention.

Using the type key, you can define your input as an HTML Rich Text input with the “markdown” value. 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"
    }
  }
}

[_inputs.top_copy]
type = "markdown"

---
top_copy: |
  # Animals

  - Dogs
  - Cats

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

Using the key naming convention, CloudCannon will interpret any input key named markdown or that ends in _markdown as an Markdown Rich Text input.

---
markdown: |
  # 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 }}

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:

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.