8
0

restricted-editing.md 2.0 KB


title: Restricted editing menu-title: Restricted editing

category: features

{@snippet features/build-restricted-editing-source}

The ...

Demo

The demo below works in two modes: "Standard Editing Mode" and "Restricted Editing Mode". Using the radio buttons below you can switch between modes.

{@snippet features/restricted-editing}

Installation

To add this feature to your rich-text editor, install the @ckeditor/ckeditor5-restricted-editing package:

npm install --save @ckeditor/ckeditor5-restricted-editing

Running the Standard Editing Mode

And add it to your plugin list and the toolbar configuration:

import StandardEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/standardeditingmode';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		plugins: [ StandardEditingMode, ... ],
		toolbar: [ 'restrictedEditingException', ... ]
	} )
	.then( ... )
	.catch( ... );

Running the Restricted Editing Mode

And add it to your plugin list and the toolbar configuration:

import RestrictedEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/restrictededitingmode';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		plugins: [ RestrictedEditingMode, ... ],
		toolbar: [ 'restrictedEditing', ... ]
	} )
	.then( ... )
	.catch( ... );

Read more about {@link builds/guides/integration/installing-plugins installing plugins}.

Common API

We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector 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.

Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-restricted-editing.