Aloha Editor

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 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.3 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.4 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.5 Table layout

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

2.6 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
		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' }
		]
	}
};

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