Editing / Options

Rich Text Options

Toolbars

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.

_options:
  some_markdown:
    bold: true
    table: true
  _text:
    italic: true
  _block:
    format: p h3
    undo: true
    redo: true
  content:
    format: p h1 h2 h3 h4 h5 h6 pre address div
    bold: true
    numberedlist: true
    code: true
    table: true
    right: align-to-right
    styles: /_sass/_content-typography.scss
    embed: true

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

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

The most specific options that apply to an interface are used, less specific options that still apply are ignored. In order of specificity: data-cms-options attributes, front matter and Jekyll defaults, then globally in _config.yml.

The complete list of options follows, all values can either be true or false unless specified otherwise:

Option	Values
bold
italic
removeformat
link
undo
redo
underline
strike
subscript
superscript
code (unavailable for _text)
format (unavailable for _text)	true, false or space separated options
blockquote (unavailable for _text)
horizontalrule (unavailable for _text)
numberedlist (unavailable for _text)
bulletedlist (unavailable for _text)
outdent (unavailable for _text)
indent (unavailable for _text)
image (unavailable for _text)
embed (unavailable for _text)
table (unavailable for _text)
styles (unavailable for _text)	false, or path to source CSS file
left (unavailable for _text)	false or string of class name
center (unavailable for _text)	false or string of class name
right (unavailable for _text)	false or string of class name
justify (unavailable for _text)	false or string of class name

Embedding Media

Allow your editors to embed YouTube, Vimeo, Tweets and other media into their content. Embedded content is sanitised to mitigate XSS risks, which includes removing style tags. Embeds containing script tags are not loaded in the editor.

_options:
  content:
    embed: true

Styles

Add predefined styles in plain CSS for your clients and team members to use in the Visual Editor, Content Editor and Front Matter interfaces.

_options:
  content:
    styles: /css/content.css

The file can have any extension, but must contain only plain CSS and be a source file. Selectors must specify an element and one class in order to be included in the styles dropdown. Styles with incompatible selectors are included in the editor, but not shown as options.

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

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

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

.center-this-text { /* Excluded from style dropdown, used as center class described below */
  text-align: center;
}

Custom styles in the Visual Editor requires the same styles on your live site, otherwise the class is applied but has no visual effect.

Use the justification options to specify classes for alignment rather than the dropdown for a better editing experience:

_options:
  _block:
    left: align-left
    center: center-this-text
    right: align-right
    justify: full-width-text

Be sure to include these classes in your styles CSS for them to take effect.