These inputs give your editors ultimate control by allowing them to write markup directly into your data files.
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
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>
side_content: <p>This is <strong>bold</strong>.</p>
_inputs:
side_content:
type: html
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>
"""
side_content = "<p>This is <strong>bold</strong>.</p>"
[_inputs.side_content]
type = "html"
{
"sidebar_html": "<p>This paragraph has <em>emphasis</em> and <strong>strength</strong>.</p>\n<ol>\n <li>Walk</li>\n <li>Run</li>\n</ol>\n<p>Linking to <a href=\"/\">index</a>.</p>"
}
{
"side_content": "<p>This is <strong>bold</strong>.</p>",
"_inputs": {
"side_content": {
"type": "html"
}
}
}
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
markdown: |
# Animals
- Dogs
- Cats
top_copy: |
# Animals
- Dogs
- Cats
_inputs:
top_copy:
type: markdown
markdown = """
# Animals
- Dogs
- Cats
"""
top_copy = """
# Animals
- Dogs
- Cats
"""
[_inputs.top_copy]
type = "markdown"
{
"markdown": "# Animals\n\n- Dogs\n- Cats"
}
{
"top_copy": "# Animals\n\n- Dogs\n- 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.
{% if page.markdown %}
{{ page.markdown | markdownify }}
{% endif %}
Hugo content
In your layout, use the markdownify
function to render Markdown from front matter.
{{ with .Params.markdown }}
{{ . | markdownify }}
{{ end }}
Eleventy content
Eleventy doesn’t have a markdownify
shortcode or filter by default, so using the value from this input depends on your specific implementation.
Other content
Other SSGs vary in processing Markdown, so using the value from this input depends on your specific implementation.
Rich Text inputs options are configured with options
inside an _inputs
entry.
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
main_content = ""
[_inputs.main_content]
type = "markdown"
[_inputs.main_content.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"
{
"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:
allow_resize
- Boolean
Shows or hides the resize handler to vertically resize the input. Defaults to true
.
height
- Integer
Defines the initial height of this input in pixels (px
). Defaults to 320
. Supports values between 135
and 1200
.
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.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.
uploads
and dam_uploads
have a number of dynamic placeholders available.
empty_type
- string
Set how an ‘empty’ value will be saved. Does not apply to existing empty values. Can be one of the following:
string
- an empty value for this input will be stored as ""
.null
- an empty value for this input will be stored as a null value (default). This does not apply to TOML files.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.
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.
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.
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.
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.
/* 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; }
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.