# Restricted editing

The restricted editing feature introduces two modes: the standard editing mode and the restricted editing mode. Users working in the restricted editing mode cannot change the content, except for parts marked as editable.

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

The demo below lets you emulate both the standard editing mode and the restricted editing mode.

Start by creating a template of the document in the standard editing mode. Select a section of the text and use the enable editing toolbar button to turn a selected area into an editable region or remove an existing one.

Then switch to the restricted editing mode to see how the editable and non-editable regions behave.

> **Tip**
>
> Use `Tab` to navigate from one editable region to another (and `Shift`+`Tab` to move back) in the restricted mode.

**Mode:**

<a id="mode-standard">

Standard

<a id="mode-restricted">

Restricted

<!-- 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="additional-feature-information">

## Additional feature information

The restricted editing feature enables two editing modes:

* **Standard editing mode** – In this mode the user can edit the content and choose regions that should be editable in the restricted editing mode.
* **Restricted editing mode** – When you initialize the editor in this mode, the user can edit the content only within the regions chosen by the user in the standard editing mode. There changes allowed withing these fields can be configured.

There are two types of editable fields: inline and block.

* **Inline editable fields** only allow content editing with [features enabled in the restricted mode](#enabling-commands-in-the-restricted-editing-mode). This kind of field can only hold inline content. They support only inline-type changes. Users can type, delete content, and format the text. However, no block-type editions are available. This means no splitting paragraphs (striking the `Enter` key) is allowed. Tables or block images cannot be added in this field, either.
* **Block editable fields** enable all content editing features loaded in the editor. Content inside the block can be anything, including lists, tables, images etc. (providing these features are loaded into the editor).

You can observe it in the [demo](#demo) while switching between the inline and the block editable field – the number of active toolbar items will change.

Both block and inline fields can be inserted via the toolbar dropdown . The availability of one or both types of fields from the toolbar [can be configured](#configuring-the-toolbar).

You can imagine a workflow where a certain group of users is responsible for creating templates of documents. At the same time, a second group of users can only fill the gaps (for example, fill in the missing data, like names, dates, product names, etc.).

By using this feature, the users of your application will be able to create template documents. In a certain way, you can use this feature to generate forms with rich-text capabilities. This kind of practical application is shown in the [How to create ready-to-print documents with CKEditor 5 pagination feature](https://ckeditor.com/blog/How-to-create-ready-to-print-documents-with-page-structure-in-WYSIWYG-editor---CKEditor-5-pagination-feature/) blog post.

> **Note**
>
> See also the [read-only feature](read-only.md) that lets you turn the entire WYSIWYG editor into read-only mode. You can also read the [dedicated blog post](https://ckeditor.com/blog/feature-of-the-month-restricted-editing-modes/) about write-restricted editor modes.

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

<a id="running-the-standard-editing-mode">

### Running the standard editing mode

To initialize the editor in the standard editing mode, add the [`StandardEditingMode`](../api/module_restricted-editing_standardeditingmode-StandardEditingMode.md) plugin and add the `'restrictedEditingException:auto'` button to the toolbar:

**NPM**

```js
import { ClassicEditor, StandardEditingMode } from 'ckeditor5';

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

**CDN**

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

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

> **Note**
>
> Please note there are available toolbar items for inline, block, auto, and both types of editable fields. Read more in the [Configuring the tollbar](#configuring-the-toolbar) section.

<a id="running-the-restricted-editing-mode">

### Running the restricted editing mode

To initialize the editor in the restricted editing mode, add the [`RestrictedEditingMode`](../api/module_restricted-editing_restrictededitingmode-RestrictedEditingMode.md) plugin and add the `'restrictedEditing'` button to the toolbar:

**NPM**

```js
import { ClassicEditor, RestrictedEditingMode } from 'ckeditor5';

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

**CDN**

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

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

<a id="configuration">

## Configuration

You can configure which features should be available in the inline editing field. For instance, the following configuration allows the users to type, delete but also to bold text.

```js
ClassicEditor
	.create( {
		// ... Other confituration options ...
		restrictedEditing: {
			allowedCommands: [ 'bold' ]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

> **Warning**
>
> This setting only applies to inline editing fields, where only inline content inserting or editing commands are allowed. Block content commands such as `insertTable` or `enter` cannot be allowed via this setting, as they are only available in block editing fields.

**Note**: Typing and deleting text is always possible in restricted editing regions. For more information, check out the [`config.restrictedEditing`](../api/module_restricted-editing_restrictededitingconfig-RestrictedEditingConfig.md) documentation.

<a id="enabling-commands-in-the-restricted-editing-mode">

### Enabling commands in the restricted editing mode

The restricted editing mode allows modifying the editor content only in designated regions. Outside these regions, most of the editor commands are turned off by default. If you wish to enable some commands outside the restricted editing regions, you can use the [`RestrictedEditingModeEditing.enableCommand()`](../api/module_restricted-editing_restrictededitingmodeediting-RestrictedEditingModeEditing.md#function-enableCommand) method. You must execute this method in the [`afterInit()`](../api/module_core_plugin-PluginInterface.md#function-afterInit) callback of an editor plugin.

**NPM**

```js
import { ClassicEditor, Plugin } from 'ckeditor5';

class MyPlugin extends Plugin {
	afterInit() {
		this.editor.plugins.get( 'RestrictedEditingModeEditing' ).enableCommand( 'myCommand' );
	}
}
```

**CDN**

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

class MyPlugin extends Plugin {
	afterInit() {
		this.editor.plugins.get( 'RestrictedEditingModeEditing' ).enableCommand( 'myCommand' );
	}
}
```

<a id="configuring-the-toolbar">

### Configuring the toolbar

When configuring the toolbar item for inserting restricted editing fields in standard mode, you can choose to provide your users with access to inline, block or both types of fields. To add these to the toolbar, you should use the following toolbar item calls, respectively: `restrictedEditingException:dropdown` (both types of fields available), `restrictedEditingException:inline`, and `restrictedEditingException:block`. There is also the `restrictedEditingException:auto` button that switches between an inline and block depending on the selection.

Example toolbar configuration may look like the one below:

```js
toolbar: [
	'restrictedEditingException:auto', '|',
	'heading', '|', 'bold', 'italic', 'link', '|',
	'bulletedList', 'numberedList', 'todolist', 'outdent', 'indent', '|',
	'blockQuote', 'insertImage', 'insertTable', '|',
	'undo', 'redo'
]
```

To configure the feature toolbar button for restricted mode, use the `restrictedEditing` call, instead. The Navigate editable regions button allows for moving between previous/next editable fields.

Example toolbar configuration may look like the one below. Please note that whatever toolbar items maybe enable, the two different types of editable fields [will not support all of them.](#additional-feature-information). From the example below, inline editable fields will only support bold, italic, link, and undo, while images, tables, and list will only be available for block type fields.

```js
toolbar: {
	items: [
		'restrictedEditing', '|',
		'heading', '|', 'bold', 'italic', `link`, '|',
		'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent', '|',
		'insertImage', 'insertTable', '|',
		'undo', 'redo'
	]
}
```

<a id="legacy-toolbar-button">

#### Legacy toolbar button

The new toolbar items were introduced with version 47.2.0. To retain full backwards compatibility, we have provided an alias toolbar item: `restrictedEditingException`. It is the old toolbar button call and it defaults to inline restricted editing field button. There is no need to change your configuration if you only want to use inline fields type.

<a id="related-features">

## Related features

CKEditor 5 has more features that help you control user permissions:

* [Read-only](read-only.md) – Turn the entire content of the editor read-only.
* [Track changes](collaboration/track-changes/track-changes.md) – Mark user changes in the content and show them as suggestions in the sidebar for acceptance or rejection.
* [Comments](collaboration/comments/comments.md) – Users can add comments to any part of the content instead of editing it directly.

> **Note**
>
> Read this [CKEditor blog post](https://ckeditor.com/blog/How-to-create-ready-to-print-documents-with-page-structure-in-WYSIWYG-editor---CKEditor-5-pagination-feature/) on how to couple restricted editing with other features to create editable document templates.

<a id="common-api">

## Common API

The [`StandardEditingMode`](../api/module_restricted-editing_standardeditingmode-StandardEditingMode.md) plugin registers:

* The `'restrictedEditingException:auto'` button that lets you mark regions as editable (either block or inline depending on the selection).
* The `'restrictedEditingException:dropdown'` button that lets you mark regions as editable.
* The `'restrictedEditingException:inline'` button that lets you mark inline regions as editable.
* The `'restrictedEditingException:block'` button that lets you mark block regions as editable.
* The `'restrictedEditingException'` button that lets you mark inline regions as editable (legacy alias).
* The [`'restrictedEditingException'`](../api/module_restricted-editing_restrictededitingexceptioncommand-RestrictedEditingExceptionCommand.md) command that allows marking inline regions as editable.
* The [`'restrictedEditingExceptionBlock'`](../api/module_restricted-editing_restrictededitingexceptionblockcommand-RestrictedEditingExceptionBlockCommand.md) command that allows marking block regions as editable.
* The [`'restrictedEditingExceptionAuto'`](../api/module_restricted-editing_restrictededitingexceptionautocommand-RestrictedEditingExceptionAutoCommand.md) command that calls either inline or block command depending on the selection.

The [`RestrictedEditingMode`](../api/module_restricted-editing_restrictededitingmode-RestrictedEditingMode.md) plugin registers:

* The `'restrictedEditing'` dropdown that lets you navigate between editable regions.
* The [`'goToPreviousRestrictedEditingException'`](../api/module_restricted-editing_restrictededitingmodenavigationcommand-RestrictedEditingModeNavigationCommand.md) and `'goToNextRestrictedEditingException'` commands that allow navigating between editable regions.

> **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="real-time-collaboration">

## Real-time collaboration

When using [real-time collaboration](https://ckeditor.com/collaboration/real-time-collaborative-editing/), all the connected users should always be in the same mode. You cannot have a different list of plugins enabled among users of a single collaborative session.

<a id="contribute">

## Contribute

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

---

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