CKEditor Ecosystem Documentation
Search
Contribute to this guideReport an issue
Home/CKEditor 4/Examples

Using the Copy Formatting Feature Documentation

The Copy Formatting feature is provided through the optional Copy Formatting plugin. It was introduced in CKEditor 4.6 and by default is available in the Full distribution only.

When the plugin is enabled, the   button is automatically added to the editor toolbar. You can use it to copy text formatting from one place in the document and apply it to another. This helps easily preserve stylistic consistency of the document.

To copy styles, place your cursor inside the text (or select a styled document fragment) and press the   button or use the Ctrl+Shift+C keyboard shortcut. Then place the cursor inside some word or select a part of the text to apply formatting to it. The copied formatting can also be applied by using the Ctrl+Shift+V keyboard shortcut.

Note that not all styles can be copied or removed. For example, Copy Formatting will not copy styles from links and will not remove links when you apply formatting to them. The default filter can be adjusted, though — see the example with filter customization below.

Copy Formatting only works with inline styles, so it will not copy or apply block-level styles (e.g. headers) to text.

A special sticky mode allows you to copy formatting once and apply it in more than one place. To enable it, double-click the   button or use the Ctrl+Shift+C keyboard shortcut. The sticky mode can be switched off by clicking the   button again or by pressing the Esc key.

Lists and Tables

It is also possible to copy formatting in tables and lists, including in some complex scenarios like nested lists or tables. In case of lists, it is even able to change the list type or start value, so applying formatting from a bulleted list to a numbered one will effectively change the list type from numbered to bulleted.

Copy Formatting Filter Customization

Formatting from certain type of elements cannot be copied. By default these elements include links, headings, images, iframes, widgets and media embeds.

This can be changed through two configuration options available: config.copyFormatting_allowRules and config.copyFormatting_disallowRules. As an example, you are only allowed to copy bold formatting in the editor below.

Additionally, you can also limit the contexts (style types) that are enabled for the Copy Formatting feature from the default plain text, list and table styles. The example below uses the config.copyFormatting_allowedContexts configuration option set to 'text' to only enable copying of text styles (specifically, as set above, just bold), so e.g. table styles will not work.

A few configuration options are available to fine-tune the Copy Formatting feature, including adjusting the default keyboard shortcuts or turning off the special "disabled" cursor that indicates you cannot apply the formatting copied from the editor content outside the editor.

Related Features

Get Sample Source Code

  • Basic document formatting using Copy Formatting 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Basic document formatting using Copy Formatting</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor1', {
      height: 255,
      // Add Copy Formatting and Color Button (Text and Background Color features) plugins.
      // Color Button is only added just to show that text and background colors can be copied, too.
      extraPlugins: 'copyformatting,colorbutton',
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>
  • Formatting lists and tables 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Formatting lists and tables</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor2', {
      height: 450,
      // Add Copy Formatting and Color Button (Text and Background Color features) plugins.
      // Color Button is only added just to show that text and background colors can be copied, too.
      extraPlugins: 'copyformatting,colorbutton',
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>
  • Customization of the Copy Formatting filter 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Customization of the Copy Formatting filter</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" id="editor3" name="editor3" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor3', {
      height: 295,
      extraPlugins: 'copyformatting,colorbutton',
      // Only allow Copy Formatting in plain text context.
      copyFormatting_allowedContexts: ['text'],
      // Only allow Copy Formatting for bold.
      copyFormatting_allowRules: 'strong;',
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>