# Format painter

The format painter feature lets you copy text formatting (such as bold, italic, font size, color, etc.) and apply it in a different place in the edited document. It helps keep the formatting consistent and speeds up the creation of rich content.

> **Unlock this feature with selected CKEditor Plans**
>
> Try all premium features – no credit card needed.
>
> [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/)

<a id="demo">

## Demo

Click the text that you want to copy the formatting from and use the paint formatting toolbar button to copy the style. Then select the target text with your mouse to apply the formatting. See below the demo for more tips on using the 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.

* **To copy the formatting**: Place the cursor inside a text with some formatting and click the paint formatting toolbar button. Notice that the mouse cursor changes to the .

* **To paint with the copied formatting**: Click any word in the document and the new formatting will be applied. Alternatively, instead of clicking a single word, you can select a text fragment (like an entire paragraph). Notice that the cursor will go back to the default one after the formatting is applied.

* **To keep painting using the same formatting**: Open the toolbar dropdown and enable the continuous painting mode. Once copied, the same formatting can be applied multiple times in different places until the paint formatting button is clicked (the cursor will then revert to the regular one).

<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 } from 'ckeditor5';
import { FormatPainter } from 'ckeditor5-premium-features';

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

**CDN**

```js
const { ClassicEditor } = CKEDITOR;
const { FormatPainter } = CKEDITOR_PREMIUM_FEATURES;

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

> **Note**
>
> Read more about [installing plugins](../getting-started/setup/configuration.md) and [toolbar configuration](../getting-started/setup/toolbar.md).

<a id="activating-the-feature">

### Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the [License key and activation](../getting-started/licensing/license-key-and-activation.md) guide for details.

<a id="integration">

## Integration

The format painter feature only supports the [text attributes](../framework/architecture/editing-engine.md#text-attributes) with the [`isFormatting`](../api/module_engine_model_schema-ModelAttributeProperties.md#member-isFormatting) [property](../api/module_engine_model_schema-ModelSchema.md#function-setAttributeProperties) set to `true`.

If you want your custom feature to become compatible with format painter, make sure you set the `isFormatting` property in your feature’s [schema](../framework/deep-dive/schema.md) configuration to `true`:

```js
// Allow myAttribute attribute on text nodes.
editor.model.schema.extend( '$text', { allowAttributes: 'myAttribute' } );

// Integration with the format painter feature.
editor.model.schema.setAttributeProperties( 'myAttribute', {
isFormatting: true
} );
```

If you want to enable format painter for existing features that are not supported out of the box, such as the [link feature](link.md), set the `isFormatting` property to `true` on a related text attribute:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
	} )
	.then( editor => {
		// Enable format painter for links. The link feature uses the "linkHref" text attribute.
		editor.model.schema.setAttributeProperties( 'linkHref', {
			isFormatting: true
		} );
	} );
```

You can use the [CKEditor 5 inspector](../framework/development-tools/inspector.md) to learn about the model structure of the content brought by other features.

<a id="limitations">

## Limitations

Not all formatting can be handled by the format painter out of the box.

* Painting with block-level formatting (like [headings](headings.md) or [image styles](images/images-styles.md)) is not supported yet.\
  Neither [links](link.md) nor [text highlights](highlight.md) are handled by the format painter. This is because, in CKEditor 5, they are considered a part of the content rather than text formatting. However, you can [work around this](#integration) if needed.

<a id="related-features">

## Related features

Here are some more CKEditor 5 features that can help you format your content:

* [Basic text styles](basic-styles.md) – The essentials, like **bold**, _italic_ and others.
* [Font styles](font.md) – Control the font [family](font.md#configuring-the-font-family-feature), [size](font.md#configuring-the-font-size-feature), and [text or background color](font.md#configuring-the-font-color-and-font-background-color-features).
* [Autoformatting](autoformat.md) – Format the text on the go using Markdown.
* [Remove format](remove-format.md) – Easily clean basic text formatting.

<a id="common-api">

## Common API

The [`FormatPainter`](../api/module_format-painter_formatpainter-FormatPainter.md) plugin registers:

* The `'formatPainter'` UI button (dropdown) component for the toolbar.
* The `'copyFormat'` command implemented by [`CopyFormatCommand`](../api/module_format-painter_copyformatcommand-CopyFormatCommand.md).
* The `'pasteFormat'` command implemented by [`PasteFormatCommand`](../api/module_format-painter_pasteformatcommand-PasteFormatCommand.md).

You can copy the formatting of the current document selection using the editor API:

```js
editor.execute( 'copyFormat' );
```

The copied formatting is stored in the [value of the `copyFormat` command](../api/module_format-painter_copyformatcommand-CopyFormatCommand.md#member-value):

```js
// Logs the copied formatting.
console.log( editor.commands.get( 'copyFormat' ).value );
```

The previously copied formatting can be applied in a different place using the following code:

```js
editor.execute( 'pasteFormat' );
```

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

---

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