# Remove formatting

The remove format feature lets you quickly remove any text formatting applied using inline HTML elements and CSS styles, like [basic text styles](basic-styles.md) (bold, italic) or [font family, size, and color](font.md). This feature does not remove block-level formatting ([headings](headings.md), [images](images/images-overview.md)) or semantic data ([links](link.md)).

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

Select the content you want to clean up and press the remove format button in the toolbar.

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

<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, RemoveFormat } from 'ckeditor5';

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

**CDN**

```js
const { ClassicEditor, RemoveFormat } = CKEDITOR;

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

<a id="configuring-the-remove-format-feature">

## Configuring the remove format feature

This feature has no integration–level configuration. Once enabled, it works out–of–the–box with all [core editor features](index.md).

<a id="a-short-note-about-content-types-in-the-editor">

## A short note about content types in the editor

The remove format feature is intended to help users tidy up chunks of content from unnecessary formatting. Each editor feature brings its own content types to the WYSIWYG editor. If you do not want the unnecessary formatting to be enabled in the first place, you may want to consider reducing the number of features enabled in the editor.

Doing that will spare the users the pain of manually removing formatting every time they paste content from other programs and make the editing experience smoother. The narrower set of editor features also gives you more control over the content saved to the database and prevents the accidental use of the types of content you would rather not store in your application.

<a id="integrating-with-editor-features">

## Integrating with editor features

In order for the remove formatting feature to work with custom content, you need to update the [schema](../framework/architecture/editing-engine.md#schema) by setting the `isFormatting` property on the custom [text attribute](../framework/architecture/editing-engine.md#text-attributes).

This is already done for most inline elements supported by the [General HTML Support](html/general-html-support.md) plugin and its derivatives such as the [Style](style.md) plugin.

By default, formatting is not removed from the [link](link.md) elements. To remove formatting from them as well, you need to create a [plugin](../getting-started/setup/configuration.md) that extends the schema and tells the editor that the `linkHref` text attribute produced by the link feature is a formatting attribute:

```js
// A simple plugin that extends the remove format feature to consider links.
function RemoveFormatLinks( editor ) {
	// Extend the editor schema and mark the "linkHref" model attribute as formatting.
	editor.model.schema.setAttributeProperties( 'linkHref', {
		isFormatting: true
	} );
}
```

Enable the `RemoveFormatLinks` plugin in the [configuration](../getting-started/setup/configuration.md#adding-features) and run the editor:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		plugins: [
			RemoveFormat,
			RemoveFormatLinks,
			// More plugins.
			// ...
		],
		toolbar: [
			'removeFormat',
			// More toolbar items.
			// ...
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

From now on, the remove format button should also remove links in the content. [Learn more about attribute properties.](../api/module_engine_model_schema-ModelSchema.md#function-setAttributeProperties)

<a id="related-features">

## Related features

CKEditor 5 has more 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) – Easily and efficiently control the font [family](font.md#configuring-the-font-family-feature), [size](font.md#configuring-the-font-size-feature), [text or background color](font.md#configuring-the-font-color-and-font-background-color-features).
* [Format painter](format-painter.md) – Easily copy text formatting and apply it in a different place in the edited document.
* [Text alignment](text-alignment.md) – Align your content left, align it right, center it, or justify.

<a id="common-api">

## Common API

The [`RemoveFormat`](../api/module_remove-format_removeformat-RemoveFormat.md) plugin registers the `'removeFormat'` UI button component and a command of the same name implemented by [`RemoveFormatCommand`](../api/module_remove-format_removeformatcommand-RemoveFormatCommand.md).

You can execute the command using the [`editor.execute()`](../api/module_core_editor_editor-Editor.md#function-execute) method:

```js
// Removes all the formatting in the selection.
editor.execute( 'removeFormat' );
```

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

<a id="contribute">

## Contribute

The source code of the feature is available on GitHub at <https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-remove-format>.

---

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