Aloha Editor

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

Guides Index ▸

Aloha Editor Plugins

Plugins are optional components of Aloha Editor.

Aloha Editor exists of the core which deals with the different contentEditable implementations of the supported browsers.

Almost all other functionality is designed to be implemented as Aloha Editor Plugin.

Plugins may provide components (buttons, input fields, … ) that can be added to the toolbar or sidebar (link plugin), or a library that can be required by other plugins (dom-to-xhtml plugin). Plugins may also hook into the AE core API to extend what is considered the core functionality of aloha (contenthandler plugin).

1 Load Plugins

To load a plugin, it must be listed in the data-aloha-plugins attribute of the Aloha Editor script tag. For example, to load the format and link plugin the script tag would look like the following


<script src="javascripts/aloha/aloha.js"
  data-aloha-plugins="common/format, common/link"></script>

2 Configure Plugins

To change the configuration parameters of plugins you can use the Aloha.settings.plugins option. All possible settings are listed on the Guides page for each plugin.

The common pattern for configuring plugins is that there is a config key for global configuration and an editables key for configuration specific to editables. The editables key holds an object which contains a jquery selector to identify individual editable as the key and the corresponding configuration as it’s value. Usually plugins will expect the names of their buttons as configuration settings as best practice, but the available options may vary.

If multiple selectors apply for an editable only configuration of the last one is taken into account. 


<script type="text/javascript">
	Aloha.settings = {
		plugins: {
			format: {
				// all elements with no specific configuration get this configuration
				config: [  'b', 'i', 'sub', 'sup', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
				editables: {
					// no formatting allowed for title
					'#title': [],
					// just bold and italic for the teaser
					'#teaser': [ 'b', 'i' ]
				}
			}
		}
	}
</script>

3 Available Plugins

Plugins in the common directory:

  • common/abbr – the Abbr plugin provides an interface to wrap content with a <abbr> element.
  • common/align – the Align plugin provides an interface to align contents left, right, center, or justify the flow of text.
  • common/block – Blocks are non-editable areas of a website, which often have some properties being editable through the Aloha user interface.
  • common/characterpicker – the Character Picker plugin provides an interface to insert special characters.
  • common/commands – the Commands plugin provides the inserthtml command for use with the paste plugin.
  • common/contenthandler – the Content Handler plugin allows automatic processing of HTML inserted into an editable.
  • common/dom-to-xhtml – the DOM to XHTML plugin provides support for editable.getContents() XHTML serialization.
  • common/format – the Format plugin provides basic formatting choices for your content.
  • common/highlighteditables – the Highlight Editables plugin provides a visual hint of where editables are in the page.
  • common/horizontalruler – the Horizontalruler plugin provides an interface to insert a horizontal ruler element.
  • common/image – the Image plugin provides an interface to add and manipulate images.
  • common/link – the Link Plugin allows you to add hyperlinks to your document, either by specifying them manually or by selecting from repositories using autocompletion.
  • common/list – the List plugin provides an interface to format or insert ordered and unordered lists.
  • common/paste – the Paste plugin provides the means to process content pasted from the clipboard.
  • common/table – the Table plugin provides specialized controls for table insertion and manipulation.
  • common/undo – the Undo plugin replaces the native browser undo and redo functionality.

Plugins in the extra directory:

Community Plugins: