|
|
@@ -5,7 +5,7 @@ category: features
|
|
|
|
|
|
{@snippet features/build-table-source}
|
|
|
|
|
|
-The {@link module:table/table~Table} feature offers table creation an editing tools that help content authors bring tabular data into their documents.
|
|
|
+The {@link module:table/table~Table} feature offers table creation and editing tools that help content authors bring tabular data into their documents.
|
|
|
|
|
|
## Demo
|
|
|
|
|
|
@@ -13,13 +13,13 @@ The {@link module:table/table~Table} feature offers table creation an editing to
|
|
|
|
|
|
## Installation
|
|
|
|
|
|
-To add this feature to your editor install the [`@ckeditor/ckeditor5-table`](https://www.npmjs.com/package/@ckeditor/ckeditor5-table) package
|
|
|
+To add this feature to your editor, install the [`@ckeditor/ckeditor5-table`](https://www.npmjs.com/package/@ckeditor/ckeditor5-table) package:
|
|
|
|
|
|
```bash
|
|
|
npm install --save @ckeditor/ckeditor5-table
|
|
|
```
|
|
|
|
|
|
-then add `'Table'` and `'TableToolbar'` to your plugin list and the table toolbar configuration:
|
|
|
+Then add `'Table'` and `'TableToolbar'` to your plugin list and configure the table toolbar:
|
|
|
|
|
|
```js
|
|
|
import Table from '@ckeditor/ckeditor5-table/src/table';
|
|
|
@@ -38,19 +38,19 @@ ClassicEditor
|
|
|
```
|
|
|
|
|
|
<info-box info>
|
|
|
- At this moment the feature is available only in the {@link builds/guides/overview#document-editor document editor build}. Read more about {@link builds/guides/development/installing-plugins installing plugins} if you want to add it to other editor builds.
|
|
|
+ At the moment by default the table feature is available only in the {@link builds/guides/overview#document-editor document editor build}. Read more about {@link builds/guides/development/installing-plugins installing plugins} if you want to add it to other editor builds.
|
|
|
</info-box>
|
|
|
|
|
|
## Common API
|
|
|
|
|
|
The {@link module:table/table~Table} plugin registers the following UI components:
|
|
|
|
|
|
-* The `'insertTable'` dropdown,
|
|
|
-* The `'tableColumn'` dropdown,
|
|
|
-* The `'tableRow'` dropdown,
|
|
|
-* The `'mergeCell'` dropdown,
|
|
|
+* The `'insertTable'` dropdown.
|
|
|
+* The `'tableColumn'` dropdown.
|
|
|
+* The `'tableRow'` dropdown.
|
|
|
+* The `'mergeCell'` dropdown.
|
|
|
|
|
|
-and the following commands:
|
|
|
+And the following commands:
|
|
|
|
|
|
* The {@link module:table/commands/inserttablecommand~InsertTableCommand `'inserttable'`} command.
|
|
|
|
|
|
@@ -60,29 +60,29 @@ and the following commands:
|
|
|
editor.execute( 'insertTable', { rows: 20, columns: 5 } );
|
|
|
```
|
|
|
|
|
|
-* The {@link module:table/commands/insertcolumncommand~InsertColumnCommand} as `'insertColumnBefore'` and `'insertColumnAfter'` commands.
|
|
|
+* The {@link module:table/commands/insertcolumncommand~InsertColumnCommand} in a form of `'insertColumnBefore'` and `'insertColumnAfter'` commands.
|
|
|
|
|
|
- To insert a column before or after the selected cell, execute one of the commands:
|
|
|
+ To insert a column before the selected cell, execute the following command:
|
|
|
|
|
|
```js
|
|
|
editor.execute( 'insertColumnBefore' );
|
|
|
```
|
|
|
|
|
|
- or
|
|
|
+ To insert a column after the selected cell, execute the following command:
|
|
|
|
|
|
```js
|
|
|
editor.execute( 'insertColumnAfter' );
|
|
|
```
|
|
|
|
|
|
-* The {@link module:table/commands/insertrowcommand~InsertRowCommand} as `'insertRowAbove'`and `'insertRowBelow'` commands.
|
|
|
+* The {@link module:table/commands/insertrowcommand~InsertRowCommand} in a form of `'insertRowAbove'` and `'insertRowBelow'` commands.
|
|
|
|
|
|
- To insert a row below or above the selected cell, execute one of the commands:
|
|
|
+ To insert a row below the selected cell, execute the following command:
|
|
|
|
|
|
```js
|
|
|
editor.execute( 'insertRowBelow' );
|
|
|
```
|
|
|
|
|
|
- or
|
|
|
+ To insert a row above the selected cell, execute the following command:
|
|
|
|
|
|
```js
|
|
|
editor.execute( 'insertRowAbove' );
|
|
|
@@ -112,7 +112,7 @@ and the following commands:
|
|
|
editor.execute( 'setColumnHeader' );
|
|
|
```
|
|
|
|
|
|
- **Note:** All preceding columns will also become headers. If the current column is already a header, executing this command will make it a regular column back again (including following columns).
|
|
|
+ **Note:** All preceding columns will also become headers. If the current column is already a header, executing this command will make it a regular column back again (including the following columns).
|
|
|
|
|
|
* The {@link module:table/commands/setheaderrowcommand~SetHeaderRowCommand `'setRowHeader'`} command.
|
|
|
|
|
|
@@ -122,11 +122,11 @@ and the following commands:
|
|
|
editor.execute( 'setRowHeader' );
|
|
|
```
|
|
|
|
|
|
- **Note:** All preceding rows will also become headers. If the current row is already a header, executing this command will make it a regular row back again (including following rows).
|
|
|
+ **Note:** All preceding rows will also become headers. If the current row is already a header, executing this command will make it a regular row back again (including the following rows).
|
|
|
|
|
|
-* The {@link module:table/commands/mergecellcommand~MergeCellCommand} as `'mergeCellRight'`, `'mergeCellLeft'`, `'mergeCellUp'` and `'mergeCellDown'` commands.
|
|
|
+* The {@link module:table/commands/mergecellcommand~MergeCellCommand} in a form of `'mergeCellRight'`, `'mergeCellLeft'`, `'mergeCellUp'` and `'mergeCellDown'` commands.
|
|
|
|
|
|
- To merge a table cell at the current selection with another cell, execute the command corresponding with the preferred direction. E.g. to merge with a cell to the right:
|
|
|
+ To merge a table cell at the current selection with another cell, execute the command corresponding with the preferred direction. For example, to merge with a cell to the right:
|
|
|
|
|
|
```js
|
|
|
editor.execute( 'mergeCellRight' );
|
|
|
@@ -136,13 +136,13 @@ and the following commands:
|
|
|
|
|
|
* The {@link module:table/commands/splitcellcommand~SplitCellCommand} as `'splitCellVertically'` and `'splitCellHorizontally'` commands.
|
|
|
|
|
|
- You can split any cell vertically or horizontally by executing this command. E.g. to split the selected table cell vertically:
|
|
|
+ You can split any cell vertically or horizontally by executing this command. For example, to split the selected table cell vertically:
|
|
|
|
|
|
```js
|
|
|
editor.execute( 'splitCellVertically' );
|
|
|
```
|
|
|
|
|
|
-The {@link module:table/tabletoolbar~TableToolbar} plugin introduces the balloon toolbar for the tables. The toolbar shows up when a table cell is selected, anchored to the table. It is possible to {@link module:table/table~TableConfig#toolbar configure} its content. Normally, it contains the table-related tools such as `'tableColumn'`, `'tableRow'`, and `'mergeCell'` dropdowns.
|
|
|
+The {@link module:table/tabletoolbar~TableToolbar} plugin introduces the balloon toolbar for tables. The toolbar shows up when a table cell is selected and is anchored to the table. It is possible to {@link module:table/table~TableConfig#toolbar configure} its content. Normally, it contains the table-related tools such as `'tableColumn'`, `'tableRow'`, and `'mergeCell'` dropdowns.
|
|
|
|
|
|
## Contribute
|
|
|
|