Contribute to this guide

guideBlock quote

The BlockQuote feature allows you to easily include block quotations or pull quotes in the rich-text content. This provides an attractive way to draw the readers’ attention to selected parts of text. It also helps organize the content in a structured, elegant way and to manage the flow better.

# Demo

Use the editor below to see the block quote plugin in action. You can also precede the quotation with the > inline code (followed by a space) to format it on the go thanks to the autoformatting feature.

The Famous Einstein Quote that never was

All of us — well, maybe most of us — have encountered the following quote in the past few years:

Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid.

Albert Einstein

It is mostly popular on Facebook and other social networks, where people share it aplenty. No wonder, as it sounds great, it sounds smart, it is neat and, well, let’s be frank — Albert is one hell of a figure!

The truth, however, is not as neat, not as great and people who mindlessly forward the quote are not as smart. Because, in fact, Einstein has never said that. It comes from a 2004 book “The Rhythm of Life: Living Every Day with Passion and Purpose” by Mathew Kelly, published almost 50 years after Albert’s death in 1955.

He was, most probably, inspired by an essay by Amos E. Dolbear of Tufts titled “An Educational Allegory”, describing animals educated to work on their weakest features instead of their strongest ones. So an eagle was made to run, a penguin was forced to fly and so on. There is also the 1903 “Jungle School Boards” fable from an Illinois newspaper in which a monkey, a kangaroo and an elephant cannot agree on the curriculum for their animal school — should little animals be taught tree-climbing, jumping or looking wise? 

In the late 1940s, something that appears to be an amalgam of the two was published and later reprinted with various changes in the 1960s. The idea evolved for decades and got mixed up with a few other quotes about being a genius originating back to the 1970s. Finally, Kelly wrote in his 2004 book:

Albert Einstein wrote, “Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid.” The question I have for you at this point of our journey together is, “What is your genius?”

Why he attributed this to Albert Einstein remains unclear. The fact is, the quote got popular. But apparently not everybody is a genius when it comes to fact-checking and sources...

Here are some other CKEditor 5 features that you can use similarly to the block quote plugin to structure your text better:

  • Block indentation – Set indentation for text blocks such as paragraphs or lists.
  • Code block – Insert longer, multiline code listings.
  • Text alignment – Align your content left, right, center it or justify.
  • Autoformatting – Add formatting elements (such as block quotes) as you type with Markdown code.

# Installation

To add this feature to your rich-text editor, install the @ckeditor/ckeditor5-block-quote package:

npm install --save @ckeditor/ckeditor5-block-quote

And add it to your plugin list configuration:

import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ BlockQuote, ... ],
        toolbar: [ 'blockQuote', ... ]
    } )
    .then( ... )
    .catch( ... );

Read more about installing plugins.

# Common API

The BlockQuote plugin registers:

The command can be executed using the editor.execute() method:

// Applies block quote to the selected content.
editor.execute( 'blockQuote' );

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-block-quote.