From 03f1d679f6aa4c3cc697d8f93fa1cdcdda40fac3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Wed, 4 Dec 2019 15:26:12 +0100 Subject: [PATCH] Docs: Improved the feature guide. Closes ckeditor/ckeditor5#5801. --- .../features/restricted-editing.html | 32 ++++---------- docs/features/restricted-editing.md | 44 ++++++++++++++----- 2 files changed, 41 insertions(+), 35 deletions(-) diff --git a/docs/_snippets/features/restricted-editing.html b/docs/_snippets/features/restricted-editing.html index 35a75b93..49660f02 100644 --- a/docs/_snippets/features/restricted-editing.html +++ b/docs/_snippets/features/restricted-editing.html @@ -5,27 +5,13 @@

-

Heading 1

-

Paragraph it is editable

-

Bold Italic Link

- -
    -
  1. OL List item 1
    2. -
  2. OL List item 2
    3. -
-
- bar -
Caption
-
-
-

Quote

-
    -
  • Quoted UL List item 1
    • -
  • Quoted UL List item 2
    • -
-

Quote

-
+

Dear Customer Name,

+ +

thank you for contacting us. Your case was logged as Case ID and is assigned to Technician Name. We will attempt to resolve your issue within the next Time hours.

+ +

Should you need any further assistance, do not hesitate to contact our Customer Support Hotline at Hotline Number.

+ +

Yours sincerely,
+ Name
+ Customer Support Team

diff --git a/docs/features/restricted-editing.md b/docs/features/restricted-editing.md index fe9afb42..80352050 100644 --- a/docs/features/restricted-editing.md +++ b/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** — 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 -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. + + + Tip: Use Tab to navigate from one editable region to another (and Shift+Tab to move back) in the restricted mode. + {@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( ... ); ``` - Read more about {@link builds/guides/integration/installing-plugins installing plugins}. ## 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. + 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. +## 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.