Aloha Editor

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

Aloha Editor toolbar

After reading this guide, you will be able to:

  • Configure Aloha Editor toolbar

This guide is currently a draft for the Aloha Editor jQuery UI, which is supposed to be the next generation UI for Aloha Editor. Your feedback is welcome!

1 Toolbar concept

The Toolbar provides tabs and groups. You may add ui components to groups. There ist only one instance of a the toolbar and it changes its items depending on the acitvated editable.

2 Toolbar integration

You may embed the toolbar in a given container in your site or let it float. If you don’t provide a container the toolbar will append a div element as last element of the documents body and position the toolbar as defined.


	Aloha.ui.toolbar.appendTo('#aloha-toolbar');

3 Component configuration

You may define the name of your tabs and groups as key. The following example defines a toolbar with the 3 tabs format, insert and link. The name of the tabs and groups is passed to i18n which translates them to the currently displayed language. The format tab has the two groups inline and paragraph. You may define the components that should be rendered by the group.


Aloha.settings.toolbar = {
    tabs: {
    	format : {
    		inline: [ 'bold', 'italic', 'striketrough',
    			'abbreviation', 'spacer', 'metaview' ]
			paragraph: [ 'formatparagraph' ]
    	},
		insert: {
			general: [ 'insertable', 'charakterpicker', 'insertlink' ]
    		media: [ 'image', 'video' ]
    	},
    	link: {
    		link: [ 'editlink' ]
    	} 
    }
};

4 Behavior configuration