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

Commit

Permalink
Merge d9ee539 into b9ceb1f
Browse files Browse the repository at this point in the history
  • Loading branch information
jodator committed Nov 26, 2019
2 parents b9ceb1f + d9ee539 commit d37ca01
Show file tree
Hide file tree
Showing 30 changed files with 2,147 additions and 405 deletions.
Empty file.
22 changes: 22 additions & 0 deletions docs/_snippets/features/build-restricted-editing-source.js
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;
31 changes: 31 additions & 0 deletions docs/_snippets/features/restricted-editing.html
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>
62 changes: 62 additions & 0 deletions docs/_snippets/features/restricted-editing.js
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 );
}
34 changes: 34 additions & 0 deletions docs/api/restricted-editing.md
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)
78 changes: 78 additions & 0 deletions docs/features/restricted-editing.md
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.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,14 @@
},
"devDependencies": {
"@ckeditor/ckeditor5-basic-styles": "^15.0.0",
"@ckeditor/ckeditor5-clipboard": "^15.0.0",
"@ckeditor/ckeditor5-editor-classic": "^15.0.0",
"@ckeditor/ckeditor5-engine": "^15.0.0",
"@ckeditor/ckeditor5-paragraph": "^15.0.0",
"@ckeditor/ckeditor5-table": "^15.0.0",
"@ckeditor/ckeditor5-typing": "^15.0.0",
"@ckeditor/ckeditor5-utils": "^15.0.0",
"@ckeditor/ckeditor5-undo": "^15.0.0",
"eslint": "^5.5.0",
"eslint-config-ckeditor5": "^2.0.0",
"husky": "^2.4.1",
Expand Down
30 changes: 0 additions & 30 deletions src/restrictedediting.js

This file was deleted.

0 comments on commit d37ca01

Please sign in to comment.