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

Commit

Permalink
Add information about enableCommand method to the restricted editing …
Browse files Browse the repository at this point in the history
…mode feature guide.
  • Loading branch information
jodator committed Apr 21, 2020
1 parent eec071c commit 8f77206
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 2 deletions.
14 changes: 14 additions & 0 deletions docs/features/restricted-editing.md
Expand Up @@ -53,6 +53,20 @@ ClassicEditor

**Note**: Typing and deleting text is always possible in restricted editing regions. For more information, check out the {@link module:restricted-editing/restrictededitingmode~RestrictedEditingModeConfig `config.restrictedEditing`} documentation.

### Enabling commands in the restricted editing mode

The restricted editing mode allows to modify the editor contents only in designated regions. Outside those regions most of the editor commands are disabled by default. If you wish to enable some commands outside the restricted editing regions you can call the {@link module:restricted-editing/restrictededitingmodeediting~RestrictedEditingModeEditing#enableCommand `RestrictedEditingModeEditing.enableCommand()`}. This method must be done in the {@link module:core/plugin~PluginInterface#afterInit} callback of a CKEditor5 plugin.

```js
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';

class MyPlugin extends Plugin {
afterInit() {
this.editor.plugins.get( 'RestrictedEditingModeEditing' ).enableCommand( 'myCommand' );
}
}
```

## 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:
Expand Down
26 changes: 24 additions & 2 deletions tests/manual/restrictedediting.js
Expand Up @@ -11,6 +11,7 @@ import Table from '@ckeditor/ckeditor5-table/src/table';

import StandardEditingMode from '../../src/standardeditingmode';
import RestrictedEditingMode from '../../src/restrictededitingmode';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';

const restrictedModeButton = document.getElementById( 'mode-restricted' );
const standardModeButton = document.getElementById( 'mode-standard' );
Expand Down Expand Up @@ -53,10 +54,31 @@ async function startStandardEditingMode() {
} );
}

// Functional form of a plugin - might be a class that extends `Plugin` as well.
function MyPlugin( editor ) {
// This action must be done in the `afterInit()` method of your plugin.
this.afterInit = () => {
const restrictedEditingModeEditing = editor.plugins.get( 'RestrictedEditingModeEditing' );

const commandsToEnable = [
'insertTableRowAbove', 'insertTableRowBelow',
'insertTableColumnRight', 'insertTableColumnLeft',
'mergeTableCells'
];

// Enable (always) some commands in restricted editing mode.
commandsToEnable.forEach( commandName => restrictedEditingModeEditing.enableCommand( commandName ) );
};
}

async function startRestrictedEditingMode() {
await reloadEditor( {
plugins: [ ArticlePluginSet, Table, RestrictedEditingMode ],
toolbar: [ 'bold', 'italic', 'link', '|', 'restrictedEditing', '|', 'undo', 'redo' ]
plugins: [ ArticlePluginSet, Table, TableToolbar, RestrictedEditingMode, MyPlugin ],
toolbar: [ 'bold', 'italic', 'link', '|', 'restrictedEditing', '|', 'undo', 'redo' ],
table: {
contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ],
tableToolbar: [ 'bold', 'italic' ]
}
} );
}

Expand Down

0 comments on commit 8f77206

Please sign in to comment.