This repository has been archived by the owner on Jun 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
30 changed files
with
2,147 additions
and
405 deletions.
There are no files selected for viewing
Empty file.
22 changes: 22 additions & 0 deletions
22
docs/_snippets/features/build-restricted-editing-source.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
/** | ||
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
*/ | ||
|
||
/* globals window */ | ||
|
||
import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor'; | ||
import RestrictedEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/restrictededitingmode'; | ||
import StandardEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/standardeditingmode'; | ||
|
||
import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset'; | ||
import Table from '@ckeditor/ckeditor5-table/src/table'; | ||
|
||
ClassicEditor.builtinPlugins.push( | ||
RestrictedEditingMode, StandardEditingMode, ArticlePluginSet, Table ); | ||
|
||
window.ClassicEditor = ClassicEditor; | ||
// window.RestrictedEditingMode = RestrictedEditingMode; | ||
// window.StandardEditingMode = StandardEditingMode; | ||
// window.ArticlePluginSet = ArticlePluginSet; | ||
// window.Ta = Ta; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
<p> | ||
<b>Mode</b>: | ||
<input type="radio" id="mode-standard" name="editor-restriction-mode" value="standard" checked><label for="mode-standard">Standard</label> | ||
<input type="radio" id="mode-restricted" name="editor-restriction-mode" value="restricted"><label for="mode-restricted">Restricted</label> | ||
</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> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
/** | ||
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
*/ | ||
|
||
/* globals ClassicEditor, window, document */ | ||
|
||
const restrictedModeButton = document.getElementById( 'mode-restricted' ); | ||
const standardModeButton = document.getElementById( 'mode-standard' ); | ||
|
||
restrictedModeButton.addEventListener( 'change', handleModeChange ); | ||
standardModeButton.addEventListener( 'change', handleModeChange ); | ||
|
||
startMode( document.querySelector( 'input[name="editor-restriction-mode"]:checked' ).value ); | ||
|
||
async function handleModeChange( evt ) { | ||
await startMode( evt.target.value ); | ||
} | ||
|
||
async function startMode( selectedMode ) { | ||
if ( selectedMode === 'standard' ) { | ||
await startStandardEditingMode(); | ||
} else { | ||
await startRestrictedEditingMode(); | ||
} | ||
} | ||
|
||
async function startStandardEditingMode() { | ||
await reloadEditor( { | ||
removePlugins: [ 'RestrictedEditingMode' ], | ||
toolbar: [ | ||
'heading', '|', 'bold', 'italic', 'link', '|', | ||
'bulletedList', 'numberedList', 'blockQuote', 'insertTable', '|', | ||
'restrictedEditingException', '|', 'undo', 'redo' | ||
], | ||
image: { | ||
toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ] | ||
}, | ||
table: { | ||
contentToolbar: [ | ||
'tableColumn', | ||
'tableRow', | ||
'mergeTableCells' | ||
] | ||
} | ||
} ); | ||
} | ||
|
||
async function startRestrictedEditingMode() { | ||
await reloadEditor( { | ||
removePlugins: [ 'StandardEditingMode' ], | ||
toolbar: [ 'bold', 'italic', 'link', '|', 'restrictedEditing', '|', 'undo', 'redo' ] | ||
} ); | ||
} | ||
|
||
async function reloadEditor( config ) { | ||
if ( window.editor ) { | ||
await window.editor.destroy(); | ||
} | ||
|
||
window.editor = await ClassicEditor.create( document.querySelector( '#restricted-editing-editor' ), config ); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
--- | ||
category: api-reference | ||
--- | ||
|
||
# CKEditor 5 restricted editing feature | ||
|
||
[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-restricted-editing.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-restricted-editing) | ||
|
||
This package implements the restricted editing feature for CKEditor 5. | ||
|
||
## Demo | ||
|
||
Check out the {@link features/restricted-editing#demo demo in the restricted editing feature} guide. | ||
|
||
## Documentation | ||
|
||
See the {@link features/restricted-editing restricted editing feature} guide and the {@link module:restricted-editing/restrictededitingmode~RestrictedEditingMode} and {@link module:restricted-editing/standardeditingmode~StandardEditingMode} plugins documentation. | ||
|
||
## Installation | ||
|
||
```bash | ||
npm install --save @ckeditor/ckeditor5-restricted-editing | ||
``` | ||
|
||
## Contribute | ||
|
||
The source code of this package is available on GitHub in https://github.com/ckeditor/ckeditor5-restricted-editing. | ||
|
||
## External links | ||
|
||
* [`@ckeditor/ckeditor5-restricted-editing` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-restricted-editing) | ||
* [`ckeditor/ckeditor5-restricted-editing` on GitHub](https://github.com/ckeditor/ckeditor5-restricted-editing) | ||
* [Issue tracker](https://github.com/ckeditor/ckeditor5/issues) | ||
* [Changelog](https://github.com/ckeditor/ckeditor5-restricted-editing/blob/master/CHANGELOG.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
--- | ||
title: Restricted editing | ||
menu-title: Restricted editing | ||
category: features | ||
--- | ||
|
||
{@snippet features/build-restricted-editing-source} | ||
|
||
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: | ||
|
||
1. Standard editing mode | ||
2. Restricted editing mode | ||
|
||
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. | ||
|
||
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'`. | ||
|
||
## 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. | ||
|
||
{@snippet features/restricted-editing} | ||
|
||
## Installation | ||
|
||
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 | ||
npm install --save @ckeditor/ckeditor5-restricted-editing | ||
``` | ||
|
||
### Running the Standard Editing Mode | ||
|
||
And add it to your plugin list and the toolbar configuration: | ||
|
||
```js | ||
import StandardEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/standardeditingmode'; | ||
|
||
ClassicEditor | ||
.create( document.querySelector( '#editor' ), { | ||
plugins: [ StandardEditingMode, ... ], | ||
toolbar: [ 'restrictedEditingException', ... ] | ||
} ) | ||
.then( ... ) | ||
.catch( ... ); | ||
``` | ||
|
||
### Running the Restricted Editing Mode | ||
|
||
And add it to your plugin list and the toolbar configuration: | ||
|
||
```js | ||
import RestrictedEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/restrictededitingmode'; | ||
|
||
ClassicEditor | ||
.create( document.querySelector( '#editor' ), { | ||
plugins: [ RestrictedEditingMode, ... ], | ||
toolbar: [ 'restrictedEditing', ... ] | ||
} ) | ||
.then( ... ) | ||
.catch( ... ); | ||
``` | ||
|
||
|
||
<info-box info> | ||
Read more about {@link builds/guides/integration/installing-plugins installing plugins}. | ||
</info-box> | ||
|
||
## Common API | ||
|
||
<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> | ||
|
||
## Contribute | ||
|
||
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-restricted-editing. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.