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

This premium feature is a part of the Productivity Pack. The Productivity Pack is included in our commercial license. If you have an active CKEditor 5 license, please contact your Account Manager to check your eligibility. Some legacy licenses are not eligible for the exclusive Productivity Pack even if they are active. Contact us for more details.

You can also sign up for the CKEditor Premium Features 30-day free trial to test the feature.

# Demo

Click the text that you want to copy the formatting from and use the paint formatting toolbar button Format painter 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.

Products listed on sale

  New Image Name Description Availability Price
1. NEW!
Ultima Hikers High-quality leather boots for all terrain types and all weather conditions. Comfy and affordable.  High $69.99 $49.99
2. NEW!
Teen Spirit  Flashy yellow boots that feel like a blast from the past, yet they are a thoroughly modern solution for both urban and wilderness walks. High $49.99 $39.99
3. NEW!
Easy Lady Women's beige boots, both elegant and practical. High shanks look great both in the office lobby and in the countryside backyard. High $79.99 $69.99
4. NEW!
RoughGyvers All-weather boots made of sustainable eco-leather. Great for all outdoor activities throughout the year. High $49.99 $39.99

This demo presents a limited set of features. Visit the feature-rich editor example 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 Format painter text cursor.

  • 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

This feature is enabled by default in the superbuild only.

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';

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

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

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

# 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' );

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.