Aloha Editor

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

Guides Index ▸

Numerated Headers Plugin

With this plugin the editor has the possibility to auto generate numeration in the header tags.

The main features are:

  • Auto generate numeration
  • Put it in a <span> that will be prepended to the headline
  • Auto remove the numeration if the editor deletes the header content
  • Customizable: which headers should be affected, and in which surrounding container should the plugin process

1 Overview

So headers like:


Headline One
Headline Two
Sub Headline Two dot One

will be extended to:


1 Headline One
2 Headline Two
2.1 Sub Headline Two dot One

2 Usage

Activate an editable and press the “Toggle header numeration” button.

All headings now get a consecutive numberation according to the hierarchy.

3 Components

  • Button to toggle the heading numeration

4 Configuration

  • auto activate the feature of the plugin with numeratedactive: true (default)
  • specify selector for affected headers
  • specify Base Object, if you want the plugin to process in a specific container, or on the hole page (e.g. ‘body’)
  • specify the numeration format 1.2 or 1.2. (trailing dot).

Add a rule to your project CSS to account for the space between the heading’s text and the annotation span. e.g.: 

 span[role=“annotation”] { 	margin-right: 10px; }

This settings can be applied for individual editables.


	Aloha.settings.plugins: {
		'numerated-headers': {
			config: {
				// default true
				// numeratedactive will also accept "true" and "1" as true values
				// false and "false" for false
				numeratedactive: true,
				// if the headingselector is empty, the button will not be shown at all                     
				headingselector: 'h1, h2, h3, h4, h5, h6', // default: all
				baseobjectSelector: 'body'                 // if not set: Aloha.activeEditable,
				trailingdot: false
			}
		}
	}