# Block quote

The block quote feature lets you easily include block quotations or pull quotes in your content. It is also an attractive way to draw the readers’ attention to selected parts of the text.

<a id="demo">

## Demo

Use the block quote toolbar button in the editor below to see the feature in action. You can also type `>` followed by a space before the quotation to format it on the go thanks to the [autoformatting](autoformat.md) feature.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="nested-block-quotes">

## 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](drag-drop.md) mechanism – just select an existing block quote and drag it into another.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

> **Note**
>
> If you would want to block the possibility to nest block quotes in your editor, refer to the [Disallow nesting block quotes](#disallow-nesting-block-quotes) section to learn how to disable this functionality.

<a id="installation">

## Installation

After [installing the editor](../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor, BlockQuote } from 'ckeditor5';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ BlockQuote, /* ... */ ],
		toolbar: [ 'blockQuote', /* ... */ ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, BlockQuote } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ BlockQuote, /* ... */ ],
		toolbar: [ 'blockQuote', /* ... */ ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="configuration">

## Configuration

<a id="disallow-nesting-block-quotes">

### Disallow nesting block quotes

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

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:

```js
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( {
		extraPlugins: [ DisallowNestingBlockQuotes ],

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

> **Note**
>
> Check the [step-by-step tutorial](../framework/tutorials/crash-course/editor.md) if you need more information about the technical side of this solution.

<a id="related-features">

## Related features

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

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

<a id="common-api">

## Common API

The [`BlockQuote`](../api/module_block-quote_blockquote-BlockQuote.md) plugin registers:

* the `'blockQuote'` UI button component implemented by the [block quote UI feature](../api/module_block-quote_blockquoteui-BlockQuoteUI.md),
* the `'blockQuote'` command implemented by the [block quote editing feature](../api/module_block-quote_blockquoteediting-BlockQuoteEditing.md).

You can execute the command using the [`editor.execute()`](../api/module_core_editor_editor-Editor.md#function-execute) method:

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

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../framework/development-tools/inspector.md) 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.

<a id="contribute">

## Contribute

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

---

Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)