Docs › Blocks

Quotes

Block quotes and four quote styles: side line, quotation marks, gray box, bordered box.

For quoting someone, or to make one paragraph stand out. Picking a look from the quoteStyle menu makes a quote and styles it in one step.

Try it

Code for this demo

createEditor('#editor', {
  toolbar: 'heading | bold | blockquote quoteStyle | undo redo',
});

Making a quote

The blockquote button or Ctrl+Shift+B wraps the paragraph at the caret (or the selected paragraphs) in a quote. Again to remove it.
Type > and a space at the start of a paragraph (markdownShortcuts).
The heading dropdown has "Quote" too.
Enter on an empty last line leaves the quote. Backspace on an empty first line removes it.

Quote styles

Value	Name	Look
`'line'`	Side line	A line on the left. The default, so no style is added to the saved HTML.
`'mark'`	Quotation marks	Centered, slightly larger text. The big quotation marks are drawn by the editor CSS.
`'box'`	Gray box	Light gray background, rounded corners, no side line
`'border'`	Bordered box	Thin gray border, rounded corners

Inside a quote the menu also offers "Remove quote". Picking a style outside a quote turns the paragraph into a quote with that style.

Saved HTML

<blockquote><p>Side-line quote</p></blockquote>
<blockquote data-quote="box" style="border-left: 0; background-color: #f1f3f5; border-radius: 8px; padding: 12px 16px">
  <p>Gray box quote</p>
</blockquote>

The side line and the big quotation marks come from CSS, not inline styles. Wrap the saved HTML in <div class="e82-view"> and load 82editor.css on the reading page to match the editor, or style blockquote in your own CSS.

editor.exec('blockquote');           // add / remove a quote
editor.exec('quoteStyle', 'box');    // line | mark | box | border; '' removes the quote

Presets

The board and full presets put quoteStyle under ⋯. No preset has the blockquote button; add it to toolbar yourself if you want it.

Options

Name	Type	Default	Description
`blockquote`	toolbar item	-	Add or remove a quote (`Ctrl`+`Shift`+`B`)
`quoteStyle`	toolbar item	-	Pick a quote style (side line, quotation marks, gray box, bordered box)
`markdownShortcuts`	boolean	true	Typing shortcuts, including `>` for a quote