Contribute to this guide

guideBlock quote

The BlockQuote feature allows you to easily include block quotations or pull quotes in the rich-text content. A block quote may be used to refer to what other authors said, support your idea or present different points of view that may not necessarily be in line with the document you write, but should be included.

The block quote feature provides an attractive way to draw the readers’ attention to selected parts of text and enriches the reading experience with additional data. It also helps organize the content in a structured, elegant way 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...

# Nested block quotes

Starting from version 27.1.0, CKEditor 5 will properly display a block quote nested in another block quote. This sort of structure is indispensable in email editors or discussion forums. The ability to cite previous messages and preserve a correct quotation structure is often crucial to maintain the flow of communication. Nested block quotes may also prove useful for scientific or academic papers, but articles citing sources and referring to previous writing would often use it, too.

Support for nested block quotes is provided as backward compatibility for loading pre-existing content, for example created in CKEditor 4. Additionally, pasting content with nested block quotes is supported. You can also nest a block quote in another block quote using the drag and drop mechanism — just select an existing block quote and drag it into another.

Re: Material usage information

Tom,

This is just a reminder that we need the data for our Friday meeting with the external subcontractors. Can you please let me know, if all the reports are ready?

Zoe

Hi Zoe,

The reports are coming in, but the Q3 data is still missing. As far as I can tell, Shizuoka is behind the schedule with the final summary and the Expansion Department has not released their numbers yet. I will reach out to both and will keep you informed on that topic by noon, tomorrow.

Tom

Please do so, this is getting urgent. Contact Haleema from ED directly. Also check Shizuoka, this is very much unlike him to leave such an important matter for the last moment.

Hope to have this ready for review at the 2pm board meeting provided you can manage to prepare a summary and to have the full data by Thursday morning at the latest.

Zoe

If you would want to block the possibility to nest block quotes in your editor, refer to the Disallow nesting block quotes section to learn how to disable this functionality.

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.

# Configuration

# Disallow nesting block quotes

By default, the editor supports inserting a block quote into another block quote.

In order to disallow nesting block quotes, you need to register an additional schema rule. It needs to be added before the data is loaded into the editor, hence it is best to implement it as a plugin:

function DisallowNestingBlockQuotes( editor ) {
    editor.model.schema.addChildCheck( ( context, childDefinition ) => {
        if ( context.endsWith( 'blockQuote' ) && childDefinition.name == 'blockQuote' ) {
            return false;
        }
    } );
}

// Pass it via config.extraPlugins or config.plugins:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        extraPlugins: [ DisallowNestingBlockQuotes ],

        // The rest of the configuration.
    } )
    .then( ... )
    .catch( ... );

Check the plugin development guide if you need more information about the technical side of this solution.

# 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.