8
0
Просмотр исходного кода

Docs: Improved the feature guide. Closes ckeditor/ckeditor5#5801.

Piotrek Koszuliński 6 лет назад
Родитель
Сommit
e9da277f4a

+ 9 - 23
packages/ckeditor5-restricted-editing/docs/_snippets/features/restricted-editing.html

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

+ 32 - 12
packages/ckeditor5-restricted-editing/docs/features/restricted-editing.md

@@ -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}
 
@@ -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';
@@ -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';
@@ -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.