|
@@ -4,19 +4,26 @@ menu-title: Restricted editing
|
|
|
category: features
|
|
category: features
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
-The restricted editing feature allows to define editable areas in a documents that have restricted editing options. This feature defines
|
|
|
|
|
-two modes for the editor:
|
|
|
|
|
|
|
+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.
|
|
|
|
|
|
|
|
-1. Standard editing mode
|
|
|
|
|
-2. Restricted editing mode
|
|
|
|
|
|
|
+In order to do that, this feature introduces two editing modes:
|
|
|
|
|
|
|
|
-The standard editing mode is used as normal editor instance to create content. It also allows to mark regions of the document as non-restricted areas.
|
|
|
|
|
|
|
+* **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.
|
|
|
|
|
|
|
|
-The restricted editing mode allows other set of users to fill those non-restricted areas with text. You can additionally define which of editor commands are allowed inside non-restricted areas. The restricted editing mode expects that allowed commands are a text-formatting commands, like `'bold'`, `'italic'` or `'fontColor'`.
|
|
|
|
|
|
|
+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.).
|
|
|
|
|
+
|
|
|
|
|
+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.
|
|
|
|
|
|
|
|
## Demo
|
|
## 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.
|
|
|
|
|
|
|
+The demo below allows you to emulate both modes. You can first create 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.
|
|
|
|
|
+
|
|
|
|
|
+<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.
|
|
|
|
|
+</info-box>
|
|
|
|
|
|
|
|
{@snippet features/restricted-editing}
|
|
{@snippet features/restricted-editing}
|
|
|
|
|
|
|
@@ -28,9 +35,9 @@ To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-
|
|
|
npm install --save @ckeditor/ckeditor5-restricted-editing
|
|
npm install --save @ckeditor/ckeditor5-restricted-editing
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-### Running the Standard Editing Mode
|
|
|
|
|
|
|
+### Running the standard editing mode
|
|
|
|
|
|
|
|
-And add it to your plugin list and the toolbar configuration:
|
|
|
|
|
|
|
+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
|
|
```js
|
|
|
import StandardEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/standardeditingmode';
|
|
import StandardEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/standardeditingmode';
|
|
@@ -44,9 +51,9 @@ ClassicEditor
|
|
|
.catch( ... );
|
|
.catch( ... );
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-### Running the Restricted Editing Mode
|
|
|
|
|
|
|
+### Running the restricted editing mode
|
|
|
|
|
|
|
|
-And add it to your plugin list and the toolbar configuration:
|
|
|
|
|
|
|
+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
|
|
```js
|
|
|
import RestrictedEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/restrictededitingmode';
|
|
import RestrictedEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/restrictededitingmode';
|
|
@@ -60,17 +67,30 @@ ClassicEditor
|
|
|
.catch( ... );
|
|
.catch( ... );
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-
|
|
|
|
|
<info-box info>
|
|
<info-box info>
|
|
|
Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
|
|
Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
|
|
|
</info-box>
|
|
</info-box>
|
|
|
|
|
|
|
|
## Common API
|
|
## Common API
|
|
|
|
|
|
|
|
|
|
+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 {@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.
|
|
|
|
|
+
|
|
|
<info-box>
|
|
<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.
|
|
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.
|
|
|
</info-box>
|
|
</info-box>
|
|
|
|
|
|
|
|
|
|
+## 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.
|
|
|
|
|
+
|
|
|
## Contribute
|
|
## Contribute
|
|
|
|
|
|
|
|
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-restricted-editing.
|
|
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-restricted-editing.
|