| mceTableProps | Opens the Table Properties dialog. |
| mceTableRowProps | Opens the table row properties dialog. |
| mceTableCellProps | Opens the table cell properties dialog. |
| mceTableRowType | Changes the current row or rows to the specified type, either: `'header'`, `'body'`, or `'footer'`. The structure of header rows is dependent on the [`table_header_type` option]({{site.baseurl}}/plugins/table/#table_header_type). {{site.requires_5_4v}} |
| mceTableColType | Changes all cells in the current column or columns to the specified type, either: `'td'` or `'th'`. {{site.requires_5_4v}} |
| mceTableCellType | Changes the current cell or cells to the specified type, either: `'td'` or `'th'`. {{site.requires_5_4v}} |
The following table-related values can be queried using the [queryCommandValue]({{ site.baseurl }}/api/tinymce/tinymce.editorcommands/#querycommandvalue) API.
The following tables show the existing editor commands. These commands are provided by `tinymce` and not by the browser's internal commands. These commands can be executed using the [execCommand]({{ site.baseurl }}/api/tinymce/tinymce.editorcommands/#execcommand) function.
## Listing core and plugin editor commands
### Listing core and plugin editor commands
To retrieve a list of avaliable commands from the active editor, run the following command from the browser console:
@ -17,7 +39,7 @@ To retrieve a list of avaliable commands from the active editor, run the followi
| mceAddEditor | Converts the specified HTML or DOM element into an editor instance with the specified ID. |
| mceRemoveEditor | Removes an editor instance with the specified ID. |
| mceToggleEditor | Runs mceAddEditor if an editor is not detected for the specified ID, otherwise it runs either [hide]({{ site.baseurl }}/api/tinymce/tinymce.editor/#hide) if the editor is visible or [show]({{ site.baseurl }}/api/tinymce/tinymce.editor/#show) if it is not visible. |
| mceToggleEditor | Runs mceAddEditor if an editor is not detected for the specified ID, otherwise it runs either [hide]({{ site.baseurl }}/api/tinymce/tinymce.editor/#hide) if the editor is visible or [show]({{ site.baseurl }}/api/tinymce/tinymce.editor/#show) if it is not visible. |
## Query command states
{{site.productname}} provides the `queryCommandState` API to allow developers to determine the current state of selected content. The query will return `true` if the content is formatted using the same CSS styles and elements used by the corresponding command.
### Listing core and plugin query command states
To retrieve a list of avaliable queryable states from the active editor, run the following command from the browser console:
The following command states can be queried using the [queryCommandState]({{ site.baseurl }}/api/tinymce/tinymce.editorcommands/#querycommandstate) API.
| Bold | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `Bold` command. |
| InsertDefinitionList | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `InsertDefinitionList` command. |
| InsertOrderedList | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `InsertOrderedList` command. |
| InsertUnorderedList | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `InsertUnorderedList` command. |
| Italic | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `Italic` command. |
| JustifyCenter | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `JustifyCenter` command. |
| JustifyFull | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `JustifyFull` command. |
| JustifyLeft | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `JustifyLeft` command. |
| JustifyRight | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `JustifyRight` command. |
| mceBlockQuote | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `mceBlockQuote` command. |
| Outdent | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `Outdent` command. |
| Strikethrough | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `Strikethrough` command. |
| Subscript | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `Subscript` command. |
| Superscript | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `Superscript` command. |
| Underline | Returns `true` if the content is formatted using the same markup as the {{site.productname}} `Underline` command. |
{{site.productname}} provides the `queryCommandValue` API to allow developers to determine the current state of selected content. The query will return an object containing the relevant value.
### Listing core and plugin query command values
To retrieve a list of avaliable queryable command values from the active editor, run the following command from the browser console:
The following command values can be queried using the [queryCommandValue]({{ site.baseurl }}/api/tinymce/tinymce.editorcommands/#querycommandvalue) API.
This option enables you to force Table Properties dialog to use HTML5/CSS3 standards for setting cell spacing and cellpadding. By default, these are added as attributes to the table element. By setting this to true, cell spacing is applied to the table element as a `border-spacing` style and cell padding is applied to all `td` elements as a `padding` style
This option enables you to force the Table Properties dialog to use HTML5/CSS3 standards for setting cell spacing and cellpadding. By default, these are added as attributes to the table element. By setting this to true, cell spacing is applied to the table element as a `border-spacing` style and cell padding is applied to all `td` elements as a `padding` style.
**Type:** `Boolean`
@ -416,6 +416,94 @@ tinymce.init({
table_style_by_css: false
});
```
### `table_header_type`
The `table_header_type` option affects how tables are structured when a table row is set as a header row. Note that this setting does not affect header columns.
The `table_header_type` option has four different settings: `'section`', `'cells'`, `'sectionCells'`, and `'auto'`.
- `section` - When a table row is set as a header row, the row (`tr`) is moved to the `thead` element. The cell types (`td` and/or `th`) are unaffected.
For example:
```html
<table>
<thead>
<tr>
<td> </td>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
```
- `cells` - When a table row is set as a header row, the row (`tr`) moves to the `tbody` element (if in a `thead` element). All table data cell elements (`td`) in the row are changed to table header cell elements (`th`).
For example:
```html
<table>
<tbody>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
```
- `sectionCells` - When a table row is set as a header row, the row (`tr`) is moved to the `thead` element. All cells in the row are changed to table header cell elements (`th`).
For example:
```html
<table>
<thead>
<tr>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
```
- `auto` - Finds the first existing header row in the table and uses the same structure. If no other table header row exists, the `section` header type will be applied.
@ -28,9 +28,11 @@ The {{site.productname}} 5.4 release includes the following improvements for the
- Adds: commands, APIs, and icons for; cut, copy, and paste columns.
- Adds toolbar button icons for the cut, copy, and paste rows.
- Adds a new `table_sizing_mode` option and a new `mceTableSizingMode` command for setting the method for measuring table cell width: `fixed`, `relative`, or `responsive`.
- Adds a new `mceTableApplyCellStyle` command for applying selected styles to table cells.
- Extends the `mceInsertTable` command for adding tables without the dialog.
- Adds a new [`mceTableApplyCellStyle`]({{site.baseurl}}/plugins/table/#commands) command for applying selected styles to table cells.
- Adds a new [`table_header_type`]({{site.baseurl}}/plugins/table/#table_header_type) option for setting the HTML structure used for table header rows.
- Adds table row, column, and cell type commands and queries.
- Adds a new [`table_sizing_mode`]({{site.baseurl}}/plugins/table/#table_sizing_mode) option and a new [`mceTableSizingMode`]({{site.baseurl}}/plugins/table/#commands) command for setting the method for measuring table cell width: `fixed`, `relative`, or `responsive`.
- Extends the [`mceInsertTable`]({{site.baseurl}}/plugins/table/#commands) command for adding tables without the dialog.
For information on the table plugin, see: [Table plugin]({{site.baseurl}}/plugins/table/).
Tyler Kelly
5 years ago