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:
Option | Values |
---|---|
bold | true, false |
italic | true, false |
removeformat | true, false |
copyformatting | true, false |
link | true, false |
undo | true, false |
redo | true, false |
underline | true, false |
strike | true, false |
subscript | true, false |
superscript | true, false |
code (unavailable for _text ) |
true, false |
format (unavailable for _text ) |
true, false or space separated options |
blockquote (unavailable for _text ) |
true, false |
horizontalrule (unavailable for _text ) |
true, false |
numberedlist (unavailable for _text ) |
true, false |
bulletedlist (unavailable for _text ) |
true, false |
outdent (unavailable for _text ) |
true, false |
indent (unavailable for _text ) |
true, false |
image (unavailable for _text ) |
true, false |
embed (unavailable for _text ) |
true, false |
table (unavailable for _text ) |
true, false |
styles (unavailable for _text ) |
false, or path to 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 |
The
removeformat
andcopyformatting
options only apply tobold
,italic
,underline
,strike
,subscript
,superscript
. The controls do not remove or copy other styles or formatting.
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/editor.css
The file can be in either source or output. 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 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.