Skip to content
Home button
  • Pricing
Articles
Choose your preferred SSG:
Choose your preferred SSG:

Using Rich Text Inputs to edit your HTML and Markdown data

These inputs give your editors ultimate control by allowing them to write markup directly into your data files.

HTML

Rich text WYSIWYG input for HTML values.

HTML inputs are shown for inputs configured with the type html. or for input keys matching:

  • html
  • *_html
Screenshot of HTML Rich text input field
Naming convention 
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>
Input configuration 
side_content: <p>This is <strong>bold</strong>.</p>
_inputs:
  side_content:
    type: html

Markdown

Rich text WYSIWYG input for Markdown values.

Markdown inputs are shown for inputs configured with the type markdown. or for input keys matching:

  • markdown
  • *_markdown
Screenshot of Markdown Rich text input field
Naming convention 
markdown: |
  # Animals

  - Dogs
  - Cats
Input configuration 
top_copy: |
  # Animals

  - Dogs
  - Cats
_inputs:
  top_copy:
    type: markdown

You’ll likely need to convert the Markdown value into HTML to use it on your site:

Jekyll content

In your layout, use the markdownify function to render Markdown from front matter.

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

Hugo content

Eleventy content

Other content

Options

Rich Text inputs options are configured with options inside an _inputs entry.

Input configuration 
main_content:
_inputs:
  main_content:
    type: markdown
    options:
      blockquote: true
      bold: true
      format: p h1 h2 h3 h4 h5 h6 pre address div
      italic: true
      strike: true
      subscript: true
      superscript: true
      underline: true 
      bulletedlist: true
      indent: true
      numberedlist: true
      outdent: true 
      code: true
      embed: true
      horizontalrule: true
      image: true
      table: true 
      undo: true
      redo: true
      removeformat: true
      copyformatting: true
      styles: /css/editor.css
      left: align-left
      center: align-center
      right: align-right
      justify: align-justify

Rich Text inputs have the following options available:

Formatting

Options for base text formatting.

blockquote - Boolean

Enables a control to wrap blocks of text in block quotes.

bold - Boolean

Enables a control to set selected text to bold.

format - String

Enables a drop down menu for structured text. Has options for p, h1, h2, h3, h4, h5, h6, pre, address, and div. Set as space separated options, e.g. format: p h1 h2.

italic - Boolean

Enables a control to italicize selected text.

strike - Boolean

Enables a control to strike selected text.

subscript - Boolean

Enables a control to set selected text to subscript.

superscript - Boolean

Enables a control to set selected text to superscript.

underline - Boolean

Enables a control to underline selected text.

link - boolean

Enables a control to create hyperlinks around selected text.

List controls

Options for managing text in lists and nested lists.

bulletedlist - Boolean

Enables a control to insert an unordered list, or to convert selected blocks of text into a unordered list.

indent - Boolean

Enables a control to increase indentation for numbered and unordered lists.

numberedlist - Boolean

Enables a control to insert a numbered list, or to convert selected blocks of text into a numbered list.

outdent - Boolean

Enables a control to reduce indentation for numbered and unordered lists.

Block content

Options for adding media and full-width content elements.

code - Boolean

Enables a control to set selected text to inline code, and unselected blocks of text to code blocks.

embed - Boolean

Enables a control to insert a region of raw HTML, including YouTube, Vimeo, Tweets, and other media. Embedded content is sanitized to mitigate XSS risks, which includes removing style tags. Embeds containing script tags are not loaded in the editor.

horizontalrule - Boolean

Enables a control to insert a horizontal rule.

image - Boolean

Enables a control to insert an image. The image can be uploaded, existing or an external link.

table - Boolean

Enables a control to insert a table. Further options for table cells are available in the context menu for cells within the editor.

Paths

These paths control where new asset files are uploaded to. They also set the default path when choosing existing images, and linking to existing files.

paths - Object

Paths to common folders. Each path is relative to global site source. If unset, the paths default to those configured in the global configuration. The available keys are:

  • uploads for the default location of newly uploaded site files.
  • dam_uploads for the default location of newly uploaded DAM files.
  • dam_static for the location of statically copied assets for DAM files.

uploads and dam_uploads have a number of dynamic placeholders available.

Actions

Options for editor actions when editing and formatting content.

undo - Boolean

Enables a control to undo recent edits. Undo is always enabled through standard OS-specific keyboard shortcuts.

redo - Boolean

Enables a control to redo recent edits undone with undo. Redo is always enabled through standard OS-specific keyboard shortcuts.

removeformat - Boolean

Enables the control to remove formatting from text. Applies to formatting from bold, italic, underline, strike, subscript, and superscript. Does not remove other styles or formatting.

copyformatting - Boolean

Enables a control to copy formatting from text to other text. Only applies to formatting from bold, italic, underline, strike, subscript, and superscript. Does not copy other styles or formatting.

Styles and alignment

Add predefined styles in plain CSS for your clients and team members to use.

styles - String

Enables a drop down menu for editors to style selected text or blocks or text. Styles are the combination of an element and class name. The value for this option is the path (either source or build output) to the CSS file containing the styles.

left - String

Enables a control to left align text by toggling a class name for a block of text. The value is the class name the editor should add to align the text. The styles for this class need to be listed in the styles file to take effect outside of the input.

center - String

Enables a control to center align text by toggling a class name for a block of text. The value is the class name the editor should add to align the text. The styles for this class need to be listed in the styles file to take effect outside of the input.

right - String

Enables a control to right align text by toggling a class name for a block of text. The value is the class name the editor should add to align the text. The styles for this class need to be listed in the styles file to take effect outside of the input.

justify - String

Enables a control to justify text by toggling a class name for a block of text. The value is the class name the editor should add to justify the text. The styles for this class need to be listed in the styles file to take effect outside of the input.

The styles CSS file can be either a source or output file. The source CSS file is used if both exist. In either case, it must contain plain CSS.

Selectors must specify an element and one class in order to be included in the styles drop down. Styles with incompatible selectors are applied to the editor, but not shown as options.

The alignment classes for left, right, center and justify must be defined in the styles CSS file to give the Rich Text inputs access to those styles.

css/editor.css 
/* Can be applied to blocks of content */
p.callout {
  margin: 10px;
  border: 1px solid #f5f5f5;
  background-color: #eee;
}

/* Can be applied to inline content */
span.big-blue-text {
  font-size: 2rem;
  color: blue;
}

/* Applied to content, excluded from style dropdown */
h2 {
  font-family: cursive;
}

/* Applied to content, excluded from style dropdown */
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }
Note

Custom styles require the same styles on your live site. If you don’t have the same styles on your live site, the class will be there but it won’t change the styling.

Was this article helpful? or Suggest an improvement >