|
|
@@ -4,22 +4,26 @@ menu-title: Restricted editing
|
|
|
category: features
|
|
|
---
|
|
|
|
|
|
-The restricted editing feature allows you to define which parts of a document should be editable for a group of users who should have a more restricted editing rights.
|
|
|
+The restricted editing feature allows you to define which parts of a document can be editable for a group of users who have more restricted editing rights.
|
|
|
|
|
|
In order to do that, this feature introduces two editing modes:
|
|
|
|
|
|
-* **Standard editing mode** — in this mode the user can freely edit the content and choose regions which should be editable in the second mode — the restricted mode.
|
|
|
-* **Restricted editing mode** — when the editor is initialized in this mode the user can only edit the content within the regions chosen by the user in the previous mode.
|
|
|
+* **Standard editing mode** – In this mode the user can freely edit the content and choose regions that should be editable in the restricted editing mode.
|
|
|
+* **Restricted editing mode** – When the editor is initialized in this mode, the user can only edit the content within the regions chosen by the user in the standard editing mode.
|
|
|
|
|
|
-You can imagine a workflow in which a certain group of users is responsible for creating templates of documents while a second group of users can only fill the gaps (for example, fill missing data, like names, dates, product names, etc.).
|
|
|
+You can imagine a workflow in which a certain group of users is responsible for creating templates of documents while a second group of users can only fill the gaps (for example, fill the missing data, like names, dates, product names, etc.).
|
|
|
|
|
|
-By using this feature users of your application will be able to create template documents. In a certain way, this feature could be used to generate forms with rich-text capabilities.
|
|
|
+By using this feature, the users of your application will be able to create template documents. In a certain way, this feature could be used to generate forms with rich-text capabilities.
|
|
|
+
|
|
|
+<info-box>
|
|
|
+ See also the {@link features/read-only read-only feature} that lets you turn the entire WYSIWYG editor into read-only mode.
|
|
|
+</info-box>
|
|
|
|
|
|
## Demo
|
|
|
|
|
|
-The demo below allows you to emulate both modes. You can first create a template of the document in the standard editing mode.
|
|
|
+The demo below allows you to emulate both modes. You can start from creating a template of the document in the standard editing mode.
|
|
|
|
|
|
-Then you can switch to the restricted editing mode to see how the editable regions and non-editable regions behaves.
|
|
|
+Then you can switch to the restricted editing mode to see how the editable and non-editable regions behave.
|
|
|
|
|
|
<info-box>
|
|
|
Tip: Use <kbd>Tab</kbd> to navigate from one editable region to another (and <kbd>Shift</kbd>+<kbd>Tab</kbd> to move back) in the restricted mode.
|
|
|
@@ -31,13 +35,13 @@ Then you can switch to the restricted editing mode to see how the editable regio
|
|
|
|
|
|
To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-restricted-editing`](https://www.npmjs.com/package/@ckeditor/ckeditor5-restricted-editing) package:
|
|
|
|
|
|
-```bash
|
|
|
+```plaintext
|
|
|
npm install --save @ckeditor/ckeditor5-restricted-editing
|
|
|
```
|
|
|
|
|
|
### Running the standard editing mode
|
|
|
|
|
|
-In order to initialize the editor in the standard editing mode add the {@link module:restricted-editing/standardeditingmode~StandardEditingMode} plugin and add the `'restrictedEditingException'` button to the toolbar:
|
|
|
+In order to initialize the editor in the standard editing mode, add the {@link module:restricted-editing/standardeditingmode~StandardEditingMode} plugin and add the `'restrictedEditingException'` button to the toolbar:
|
|
|
|
|
|
```js
|
|
|
import StandardEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/standardeditingmode';
|
|
|
@@ -53,7 +57,7 @@ ClassicEditor
|
|
|
|
|
|
### Running the restricted editing mode
|
|
|
|
|
|
-In order to initialize the editor in the restricted editing mode add the {@link module:restricted-editing/restrictededitingmode~RestrictedEditingMode} plugin and add the `'restrictedEditing'` button to the toolbar:
|
|
|
+In order to initialize the editor in the restricted editing mode, add the {@link module:restricted-editing/restrictededitingmode~RestrictedEditingMode} plugin and add the `'restrictedEditing'` button to the toolbar:
|
|
|
|
|
|
```js
|
|
|
import RestrictedEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/restrictededitingmode';
|
|
|
@@ -75,13 +79,13 @@ ClassicEditor
|
|
|
|
|
|
The {@link module:restricted-editing/standardeditingmode~StandardEditingMode} plugin registers:
|
|
|
|
|
|
-* The `'restrictedEditingException'` button which allows marking regions to be editable.
|
|
|
-* The {@link module:restricted-editing/restrictededitingexceptioncommand~RestrictedEditingExceptionCommand `'restrictedEditingException'`} command which allows marking regions to be editable..
|
|
|
+* The `'restrictedEditingException'` button that allows marking regions as editable.
|
|
|
+* The {@link module:restricted-editing/restrictededitingexceptioncommand~RestrictedEditingExceptionCommand `'restrictedEditingException'`} command that allows marking regions as editable.
|
|
|
|
|
|
The {@link module:restricted-editing/restrictededitingmode~RestrictedEditingMode} plugin registers:
|
|
|
|
|
|
-* The `'restrictedEditing'` dropdown which allows navigating between editable regions.
|
|
|
-* The {@link module:restricted-editing/restrictededitingmodenavigationcommand~RestrictedEditingModeNavigationCommand `'goToPreviousRestrictedEditingException'`} and `'goToNextRestrictedEditingException'` commands which allow navigating between editable regions.
|
|
|
+* The `'restrictedEditing'` dropdown that allows navigating between editable regions.
|
|
|
+* The {@link module:restricted-editing/restrictededitingmodenavigationcommand~RestrictedEditingModeNavigationCommand `'goToPreviousRestrictedEditingException'`} and `'goToNextRestrictedEditingException'` commands that allow navigating between editable regions.
|
|
|
|
|
|
<info-box>
|
|
|
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.
|
|
|
@@ -89,7 +93,7 @@ The {@link module:restricted-editing/restrictededitingmode~RestrictedEditingMode
|
|
|
|
|
|
## Real-time collaboration
|
|
|
|
|
|
-When using the real-time collaboration, all the connected users should be always in the same mode. It is not possible to have different list of plugins among users of a single collaborative session.
|
|
|
+When using [real-time collaboration](https://ckeditor.com/collaboration/real-time-collaborative-editing/), all the connected users should always be in the same mode. It is not possible to have a different list of plugins enabled among users of a single collaborative session.
|
|
|
|
|
|
## Contribute
|
|
|
|