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

Add information about enableCommand method to the restricted editing mode feature guide.

Maciej Gołaszewski 5 лет назад
Родитель
Сommit
47d19cd67b

+ 14 - 0
packages/ckeditor5-restricted-editing/docs/features/restricted-editing.md

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

+ 24 - 2
packages/ckeditor5-restricted-editing/tests/manual/restrictedediting.js

@@ -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' );
@@ -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' ]
+		}
 	} );
 }