category: features
The {@link module:block-quote/blockquote~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.
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 {@link features/autoformat autoformatting} feature.
{@snippet features/block-quote}
Here are some other CKEditor 5 features that you can use similarly to the block quote plugin to structure your text better:
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 {@link builds/guides/integration/installing-plugins installing plugins}.
The {@link module:block-quote/blockquote~BlockQuote} plugin registers:
'blockQuote' UI button component implemented by the {@link module:block-quote/blockquoteui~BlockQuoteUI block quote UI feature},'blockQuote' command implemented by the {@link module:block-quote/blockquoteediting~BlockQuoteEditing block quote editing feature}.The command can be executed using the {@link module:core/editor/editor~Editor#execute editor.execute()} method:
// Applies block quote to the selected content.
editor.execute( 'blockQuote' );
We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector 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.
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-block-quote.