|
|
@@ -15,9 +15,11 @@ The indentation feature allows to set indentation of text blocks like paragraphs
|
|
|
|
|
|
### Using offset and unit
|
|
|
|
|
|
-By default the block indentation is controlled by setting the indentation step offset and unit. Executing indent (or outdent) commands will increase (or decrease) current block indentation by given offset.
|
|
|
+By default, the block indentation feature increases or decreases the current indentation by the given offset, using the given unit.
|
|
|
|
|
|
-The editor ind the {@link features/indent#demo demo} section was configured using offset and unit:
|
|
|
+The editor used in the {@link features/indent#demo demo} section above uses the default configuration, which defines a `40px` indentation step.
|
|
|
+
|
|
|
+You can change that value to, for example, `1em`:
|
|
|
|
|
|
```js
|
|
|
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
|
|
|
@@ -26,11 +28,11 @@ ClassicEditor
|
|
|
.create( document.querySelector( '#editor' ), {
|
|
|
plugins: [ Indent, ... ],
|
|
|
toolbar: {
|
|
|
- items: [ 'heading', '|', 'indent', 'outdent', '|', 'bulletedList', 'numberedList', '|', 'undo', 'redo' ]
|
|
|
+ items: [ 'heading', '|', 'outdent', 'indent', '|', 'bulletedList', 'numberedList', '|', 'undo', 'redo' ]
|
|
|
},
|
|
|
indentBlock: {
|
|
|
- offset: 50,
|
|
|
- unit: 'px'
|
|
|
+ offset: 1,
|
|
|
+ unit: 'em'
|
|
|
}
|
|
|
} )
|
|
|
.then( ... )
|
|
|
@@ -39,7 +41,7 @@ ClassicEditor
|
|
|
|
|
|
### Using CSS classes
|
|
|
|
|
|
-Alternatively the block indentation feature can be configured to set indentation by applying one of defined CSS classes:
|
|
|
+Alternatively, the block indentation feature can be configured to set indentation by applying one of defined CSS classes:
|
|
|
|
|
|
```js
|
|
|
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
|
|
|
@@ -49,7 +51,7 @@ ClassicEditor
|
|
|
.create( document.querySelector( '#editor' ), {
|
|
|
plugins: [ Indent, IndentBlock, ... ],
|
|
|
toolbar: {
|
|
|
- items: [ 'heading', '|', 'indent', 'outdent', '|', 'bulletedList', 'numberedList', '|', 'undo', 'redo' ]
|
|
|
+ items: [ 'heading', '|', 'outdent', 'indent', '|', 'bulletedList', 'numberedList', '|', 'undo', 'redo' ]
|
|
|
},
|
|
|
indentBlock: {
|
|
|
classes: [
|
|
|
@@ -93,12 +95,25 @@ In the demo below the CSS classes are defined as follows:
|
|
|
|
|
|
{@snippet features/custom-indent-block-classes}
|
|
|
|
|
|
+## Indenting lists
|
|
|
+
|
|
|
+The same set of buttons (`outdent`, `indent`), besides controlling block indentation, allows indenting list items (nesting them). This is completely transparent to the user.
|
|
|
+
|
|
|
+From the code perspective, the buttons are implemented by the {@link module:indent/indent~Indent} plugin, but neither those buttons nor respective commands implement any functionality by default.
|
|
|
+
|
|
|
+The target behavior comes in two other plugins:
|
|
|
+
|
|
|
+* {@link module:indent/indentblock~IndentBlock} — The indent block feature controls the indentation of elements such as paragraphs and headings.
|
|
|
+* {@link module:list/list~List} — The list feature implements the indentation (nesting) of lists.
|
|
|
+
|
|
|
+This means, that if you want to allow indenting lists only, you can do that by load only the `Indent` and `List` plugins. If you want the full behavior, you need to load all 3 plugins.
|
|
|
+
|
|
|
## Installation
|
|
|
|
|
|
-To add this feature to your editor, install the [`@ckeditor/ckeditor5-indent-block`](https://www.npmjs.com/package/@ckeditor/ckeditor5-indent-block) package:
|
|
|
+To add this feature to your editor, install the [`@ckeditor/ckeditor5-indent`](https://www.npmjs.com/package/@ckeditor/ckeditor5-indent) package:
|
|
|
|
|
|
```bash
|
|
|
-npm install --save @ckeditor/ckeditor5-indent-block
|
|
|
+npm install --save @ckeditor/ckeditor5-indent
|
|
|
```
|
|
|
|
|
|
Then add it to your plugin list and the toolbar configuration:
|
|
|
@@ -110,7 +125,7 @@ import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
|
|
|
ClassicEditor
|
|
|
.create( document.querySelector( '#editor' ), {
|
|
|
plugins: [ Indent, IndentBlock, ... ],
|
|
|
- toolbar: [ 'indent', 'outdent', ... ]
|
|
|
+ toolbar: [ 'outdent', 'indent', ... ]
|
|
|
} )
|
|
|
.then( ... )
|
|
|
.catch( ... );
|
|
|
@@ -122,11 +137,25 @@ ClassicEditor
|
|
|
|
|
|
## Common API
|
|
|
|
|
|
+The {@link module:indent/indent~Indent} plugin registers the following components:
|
|
|
+
|
|
|
+* The `'indent'` command.
|
|
|
+
|
|
|
+ Note, this command does not implement any behavior itself. It executes either `indentBlock` (described below) or `indentList`, depending on which of these commands is enabled.
|
|
|
+
|
|
|
+ Read more in the [Indenting lists](#indenting-lists) section above.
|
|
|
+
|
|
|
+* The `'outdent'` command.
|
|
|
+
|
|
|
+ Note, this command does not implement any behavior itself. It executes either `outdentBlock` (described below) or `outdentList`, depending on which of these commands is enabled.
|
|
|
+
|
|
|
+ Read more in the [Indenting lists](#indenting-lists) section above.
|
|
|
+
|
|
|
The {@link module:indent/indentblock~IndentBlock} plugin registers the following components:
|
|
|
|
|
|
* The {@link module:indent/indentblockcommand~IndentBlockCommand `'indentBlock'`} command.
|
|
|
|
|
|
- You can increase block indentation in which the selection is set by:
|
|
|
+ You can increase the indentation of the block in which the selection is set by:
|
|
|
|
|
|
```js
|
|
|
editor.execute( 'indentBlock' );
|
|
|
@@ -134,7 +163,7 @@ The {@link module:indent/indentblock~IndentBlock} plugin registers the following
|
|
|
|
|
|
* The {@link module:indent/indentblockcommand~IndentBlockCommand `'outdentBlock'`} command.
|
|
|
|
|
|
- You can decrease block indentation in which the selection is set by:
|
|
|
+ You can decrease the indentation of the block in which the selection is set by:
|
|
|
|
|
|
```js
|
|
|
editor.execute( 'outdentBlock' );
|