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.

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

• 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).

# Installation

To add this feature to your editor, install the @ckeditor/ckeditor5-format-painter package:

npm install --save @ckeditor/ckeditor5-format-painter

Then add the FormatPainter plugin to your plugin list:

import { FormatPainter } from '@ckeditor/ckeditor5-format-painter';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // Load the plugin.
        plugins: [ FormatPainter, /* ... */ ],

        // Provide activation key (see explanation below)
        licenseKey: 'your-license-key',

        // Display the paint formatting button in the toolbar.
        toolbar: [ 'formatPainter', /* ... */ ],
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the License key and activation guide for details.

# Integration

The format painter feature only supports the text attributes with the isFormatting property 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 configuration to true:

// 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, set the isFormatting property to true on a related text attribute:

ClassicEditor
.create( document.querySelector( '#editor' ), {
    // Load the plugin.
    plugins: [ FormatPainter, /* ... */ ],

    // Display the paint formatting button in the toolbar.
    toolbar: [ 'formatPainter', /* ... */ ],
} )
.then( editor => {
    // Enable format painter for links. The link feature uses the "linkHref" text attribute.
    editor.model.schema.setAttributeProperties( 'linkHref', {
        isFormatting: true
    } );
} )
.catch( /* ... */ );

You can use the CKEditor 5 inspector to learn about the model structure of the content brought by other features.

# Limitations

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

• Painting with block-level formatting (like headings or image styles) is not supported yet.
  Neither links nor text highlights 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 if needed.

# Related features

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

• Basic text styles – The essentials, like bold, italic and others.
• Font styles – Control the font family, size, and text or background color.
• Autoformatting – Format the text on the go using Markdown.
• Remove format – Easily clean basic text formatting.

# Common API

The FormatPainter plugin registers:

• The 'formatPainter' UI button (dropdown) component for the toolbar.
• The 'copyFormat' command implemented by CopyFormatCommand.
• The 'pasteFormat' command implemented by PasteFormatCommand.

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

editor.execute( 'copyFormat' );

The copied formatting is stored in the value of the copyFormat command:

// 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:

editor.execute( 'pasteFormat' );