CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

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.

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.