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.

<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/autoparagraph – the Autoparagraph plugin will make sure that all text content in editables is at least wrapped by paragraphs.
• 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:

• extra/attributes° -
• extra/browser – provides a browser for the Repository API to insert links or images
• extra/captioned-image – provides images with captions as AE Block
• extra/cite – provides the possibility to add references to content quoted from another source
• extra/comments° – add inline comments which are stored in the DOM
• extra/draganddropfiles – use Drag and Drop to upload files
• extra/emptylink – highlights links elements with no href attribute
• extra/emptyparagraph – the empty paragraph plugin highlights empty paragraphs
• extra/formatlesspaste – the formatless paste plugin can be used to strip HTML tags from pasted content
• extra/googletranslate° – translate content with Google Translate
• extra/headerids – insert jump labels for internal hyperlinks
• extra/hints – (old plugin)
• extra/linkbrowser – a browser for the link plugin
• extra/linkchecker° – (old plugin)
• extra/listenforcer – allow just one top-level list in an editable
• extra/metaview – the Meta View Plugin is used to visualize HTML elements for the editor
• extra/numerated-headers – with this plugin the editor has the possibility to auto generate numeration in the heading tags
• extra/profiler° -
• extra/ribbon – this plugin is intended to provide a Ribbon which is displayed on top of the page and some controls can be added to it dynamically
• extra/sourceview – view the source of an editable including selection marks in the sidebar
• extra/speak° – integrates speak.js into Aloha Editor
• extra/textcolor – apply colors to your text
• extra/toc – add a table of contents into your editable
• extra/vie – integrates VIE.js into Aloha Editor
• extra/wai-lang – annotate parts of the content with lang attributes
• extra/videoblock – allows for pasting of YouTube links which will then be converted to actual video embed code

Community Plugins:

• colorselector – add font color or background color
• fontsize° – select the font size
• fontfamily° – select the font family
• undoredo° – Undo/Redo plugin
• math – Use mathematical formulas and LaTeX (FF only)

° this plugin is currently not working within Aloha Editor 0.22.x and later

Chapters

1. Load Plugins

2. Configure Plugins

3. Available Plugins