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

Merge pull request #19 from ckeditor/docs-add-enable-command-info

Docs: Add information about `enableCommand()` method to the restricted editing mode feature guide.
Piotrek Koszuliński 5 лет назад
Родитель
Сommit
6aafe39e88

+ 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 modifying the editor content only in designated regions. Outside these regions most of the editor commands are disabled by default. If you wish to enable some commands outside the restricted editing regions you can use the {@link module:restricted-editing/restrictededitingmodeediting~RestrictedEditingModeEditing#enableCommand `RestrictedEditingModeEditing.enableCommand()`} method. This method must be executed in the {@link module:core/plugin~PluginInterface#afterInit `afterInit()`} callback of an editor 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' ]
+		}
 	} );
 }