Aloha Editor

Aloha Editor Guides

These guides help you to make your content editable and to develop Aloha Editor.

Table Plugin

the Table plugin provides specialized controls for table insertion and manipulation.

1 Table Plugin

The Table Plugin will allow you to edit tables within your contents. You can do pretty much everything that you’d expect from editing tables, like adding and deleting rows and columns as well as merging and splitting cells. You can use the tab key to jump from one cell to the next.

2 Functional Description

The Table plugin allows you to create, edit and delete a table, add or delete single rows or columns, define headers etc.

2.1 Create a table and make it WAI accessible

In order to create a table move a cursor to your desired position, open the “Insert” tab in the Aloha Editor and click on the Table button. Now choose how many rows and columns you want to have via moving the mouse over the grid and click on the last marked cell and create the table. The whole table is wrapped into a <table> tag and each row consists of <tr> and each cell of a <td> tag. Every table has a WAI (Web Accessibility Initiative) icon which will turn green if a summary is added.

2.2 Selecting text and cells

  • Dragging the mouse in a single cell will select contents (but not the cell itself)
  • Dragging the mouse over multiple cells will select a “rectangular” cell-range covering the area between the start position and the current position (see note below about Internet Explorer)
  • Clicking into cells while holding the SHIFT-key will add the cell to the selected cell-range, which will then cover the “rectangular” area between the first and the last SHIFT-clicked cell.
  • Clicking into the grey area above a column will select the column
  • SHIFT-Clicking into the grey area above a column will extend the current column selection to cover the area between the first and last SHIFT-clicked column
  • Clicking or SHIFT-clicking the grey area besides a row will select the row similar to selection of columns

In Internet Explorer it is not possible to select cells when you select a cell (the text in it) and drag the mouse over the other cells you want to select — you’ll have to click and drag on the table cell border which is sometimes quite tricky. In that case you can click into the first cell and then “shift-click” into the last cell of the coherent cell range you want to select.

2.3 Add and delete rows and columns

Move the mouse pointer into the grey area beside or above the row or column (the mouse standard pointer turn into a little black arrow) and click. To mark two or more rows or columns just press shift and hold it down while clicking beside other rows or columns to mark them as well. Now you can click on the desired button to add a cell or row before or after or delete the selected rows.

2.4 Table headline

To format a row or column as a headline select the row or column and click on the table header button in Aloha Editor. To delete the header formatting, select the row or column and click the button again.

2.5 Merge and split cells

In order to merge two or more cells select the desired cells, rows or columns and click the merge cells button at the Aloha Editor. The content of all cells will be displayed in on cell. To split cells just select the cells, rows or column and click the split cells button.

All contents will be merged into the first cell and all other previously split cells will be empty.

2.6 Resizing rows and columns

This feature is not available for IE 7 or below.

Table columns and rows can be resized using drag & drop. When hovering over a cells bottom or right edge the cursor will change to indicate that the cell can be resized.

The width of columns can be set in pixel or percent. Please use the colResize option in your configuration to specify either true/“px” for pixel values or “%” for percent values.

A size (either in percent or pixel) has to be set on the table tag in order for the column resize to work properly.

If “%” is set for colResize, all widths in px that are already set on columns, will be converted to percent values.

To enable table resizing the following options are available:


Aloha.settings.plugins.table: {
	// allow resizing the table width (options: "px", false, default: false)
	tableResize: true,
	// allow resizing the column width. (options: "px", "%",  false, default: false)
	colResize: true,
	// allow resizing the row height (options: "px", false, default: false)
	rowResize: true
};

Cell resizing won’t allow you to resize a cell smaller than the size of its contents. You might need to increase the width of the table first before resizing cells is possible.

When resizing the whole table, the width value is being added to the table element.

To reset a table’s size, after it has been resized, use the “reset size” button from the toolbar.

2.7 Table layout

Each cell, row or column can have an individual style applied. You only have to select the cells, rows or columns and choose one layout from the table layout list.

2.8 Table caption & summary

To add a caption to a table click inside of one cell and click the button table caption. A summary may be added by using the according field in the sidebar.

3 Configuration settings

The table configuration allows for some special settings:


Aloha.settings.plugins: {
	table: {
		// all elements with no specific configuration are not allowed to insert tables
	    config : [ 'table' ],

		editables: {
			'#one': [ 'table' ],
			'#two': [ ]
		},
		// the table summary is editable in the sidebar
		summaryinsidebar : true,
		// the following settings allow the user to apply specific classes to
		// either the whole table or a column or row. The name is used as a
		// class attribute, while the iconClass is applied as a class attribute
		// to style the buttons.
		//
		// The full list of options are as follows:
		// - name:		a unique name for the style (required)
		// - tooltip:	a tooltip string for the button
		// - iconClass:	the css class of the icon to use for the toggle button.
		//				If not set, defaults to 'aloha-icon-<name>'.
		// - cssClass:	the css class to toggle on the table/row/cell.
		//				If not set, defaults to the value of `name`.
		tableConfig : [
			{ name:'hor-minimalist-a' },
			{ name:'box-table-a' },
			{ name:'hor-zebra' },
		],
		columnConfig : [
				{ name: 'table-style-bigbold',  iconClass: 'aloha-button-col-bigbold' },
				{ name: 'table-style-redwhite', iconClass: 'aloha-button-col-redwhite' }
		],
		rowConfig : [
				{ name: 'table-style-bigbold',  iconClass: 'aloha-button-row-bigbold' },
				{ name: 'table-style-redwhite', iconClass: 'aloha-button-row-redwhite' }
		],
		cellConfig : [
				{ name: 'table-style-bigbold',  iconClass: 'aloha-button-row-bigbold' },
				{ name: 'table-style-redwhite', iconClass: 'aloha-button-row-redwhite' }
		],
		// allow resizing the table width (options: "px", false, default: false)
		tableResize: true,
		// allow resizing the column width. (options: "px", "%",  false, default: false)
		colResize: true,
		// allow resizing the row height (options: "px", false, default: false)
		rowResize: true,
		// default classes may be assigned to tables, rows and cells. The value should be a string containing a class
		// name (or multiple space-separated class names) which will be automatically applied.
		//
		// When a row or cell is a header, then the "regular" default class will not be applied, only the "header"
		// default class. If a certain class should apply to a row or cell in both header and regular states, then
		// that class should be included in both states, e.g.:
		//
		// defaultRowClass: 'table-row',
		// defaultHeaderRowClass: 'table-row header-row'
		//
		// add a class to all tables
		defaultClass: 'table-responsive'
		// add a class to all rows
		defaultRowClass: 'c-table__row',
		// add a class to all header rows
		defaultHeaderRowClass: 'c-table__row c-table__header',
		// add a class to all cells
		defaultCellClass: 'c-table__cell',
		// add a class to all header cells
		defaultHeaderCellClass: 'c-table__cell c-table__header'
	}
};

If the table layout options are used alongside the sanitize-content-handler, make sure that the ‘class’-attribute is included in the whitelist of allowed attributes for the elements ‘table’, ‘tr’ and ‘td’. Without this entries in the sanitize-content-handler’s whitelist, the content-handler will per default remove the class attribute from tables, table-rows and table-cells.

4 Components

  • table – insert a table into the content
  • addrowbefore – adds a row before the current row
  • addrowafter – adds a row after the current row
  • deleterow – deletes the current row
  • deletecolumn – deletes the current column
  • rowheader – turns current row into a row of headers
  • columnheader – turns current column into a column of headers
  • romergecells – merge all cells within this row
  • rowsplitcells – split merged cells within this row
  • columnmergecells – merge all cells within this column
  • columnsplitcells – split merged cells within this column
  • addcolumnleft – add a column left of the current column
  • addcolumnright – add a column right of the current column
  • tablemergecells – merge selected cells
  • tablesplitcells – split selected cells
  • mergecells – merge selected cells
  • splitcells – split selected cells
  • tablecaption – input field which allows you to add a caption to the table
  • naturalfit – removes defined widths and heights from rows and columns