title: Restricted editing menu-title: Restricted editing
{@snippet features/build-restricted-editing-source}
The ...
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}
To add this feature to your rich-text editor, install the @ckeditor/ckeditor5-restricted-editing package:
npm install --save @ckeditor/ckeditor5-restricted-editing
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( ... );
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}.
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.
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-restricted-editing.