Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Docs: Improved the feature guide. Closes ckeditor/ckeditor5#5801.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Reinmar
Reinmar committed Dec 4, 2019
1 parent f44235a commit 03f1d67
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 35 deletions.
32 changes: 9 additions & 23 deletions docs/_snippets/features/restricted-editing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,13 @@
</p>

<div id="restricted-editing-editor">
<h2>Heading 1</h2>
<p>Paragraph <span class="ck-restricted-editing-exception">it is editable</span></p>
<p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
<ul>
<li>UL List item 1</li>
<li>UL List item 2</li>
</ul>
<ol>
<li><span class="ck-restricted-editing-exception">OL List item 1</span></li>
<li>OL List item 2</li>
</ol>
<figure class="image image-style-side">
<img alt="bar" src="%BASE_PATH%/assets/img/fields.jpg">
<figcaption>Caption</figcaption>
</figure>
<blockquote>
<p>Quote</p>
<ul>
<li>Quoted UL List item 1</li>
<li>Quoted UL List item <span class="ck-restricted-editing-exception">2</span></li>
</ul>
<p>Quote</p>
</blockquote>
<p>Dear&nbsp;<span class="ck-restricted-editing-exception">Customer Name</span>,</p>

<p>thank you for contacting us.&nbsp;Your case was logged as&nbsp;<span class="ck-restricted-editing-exception">Case ID</span>&nbsp;and is assigned to&nbsp;<span class="ck-restricted-editing-exception">Technician Name</span>. We will attempt to resolve your issue within the next&nbsp;<span class="ck-restricted-editing-exception">Time</span>&nbsp;hours.</p>

<p>Should you need any further assistance, do not hesitate to contact our Customer Support Hotline at <span class="ck-restricted-editing-exception">Hotline Number</span>.</p>

<p>Yours sincerely,<br />
<span class="ck-restricted-editing-exception">Name</span><br />
Customer Support Team</p>
</div>
44 changes: 32 additions & 12 deletions docs/features/restricted-editing.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,26 @@ menu-title: Restricted editing
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** &mdash; in this mode the user can freely edit the content and choose regions which should be editable in the second mode &mdash; the restricted mode.
* **Restricted editing mode** &mdash; 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

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}

Expand All @@ -28,9 +35,9 @@ To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-
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
import StandardEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/standardeditingmode';
Expand All @@ -44,9 +51,9 @@ ClassicEditor
.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
import RestrictedEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/restrictededitingmode';
Expand All @@ -60,17 +67,30 @@ ClassicEditor
.catch( ... );
```


<info-box info>
Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
</info-box>

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

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

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

0 comments on commit 03f1d67

Please sign in to comment.