Configuring rich text input options

Control the toolbar options for your clients or editors to increase focus on the content at hand.

Set toolbar options for the Content Editor with the content key, and Editable Regions using the _block and _text keys. Options for Rich Text front matter interfaces are specified by matching key names.

Rich text toolbar with all options
Configuration
_options:
  some_markdown:
    bold: true
    table: true
  _text:
    italic: true
  _block:
    format: p h3
    undo: true
    redo: true
  content:
    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

You can also set options directly on elements for Editable Regions:

index.html
<p class="editable" data-cms-options='{"bold": true, "italic": true}'>...</p>

Formatting

Options for base text formatting.

blockquote - Boolean

Enables a control to wrap blocks of text in block quotes (unavailable for _text).

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 (unavailable for _text).

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.

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 (unavailable for _text).

indent - Boolean

Enables a control to increase indentation for numbered and unordered lists (unavailable for _text).

numberedlist - Boolean

Enables a control to insert a numbered list, or to convert selected blocks of text into a numbered list (unavailable for _text).

outdent - Boolean

Enables a control to reduce indentation for numbered and unordered lists (unavailable for _text).

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 (unavailable for _text).

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 (unavailable for _text).

horizontalrule - Boolean

Enables a control to insert a horizontal rule (unavailable for _text).

image - Boolean

Enables a control to insert an image. The image can be uploaded, existing or an external link (unavailable for _text).

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 (unavailable for _text).

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 in the Visual Editor, Content Editor, and Front Matter interfaces.

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 (unavailable for _text).

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 Visual Editor (unavailable for _text).

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 Visual Editor (unavailable for _text).

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 Visual Editor (unavailable for _text).

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 Visual Editor (unavailable for _text).

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 in the Visual Editor 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 >