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.

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.

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

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

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor } from 'ckeditor5';
import { FormatPainter } from 'ckeditor5-premium-features';

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

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

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

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

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' ), {
        // ... 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 to learn about the model structure of the content brought by other features.

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:

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

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