Aloha Editor

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

Aloha Editor sidebar

After reading this guide, you will be able to:

  • Configure Aloha Editor sidebar

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!

The Sidebar provides to bars (left, right) and each bar may contain tabs. You may add ui components to tabs. There is only one instance of a the sidebar and it changes its items depending on the acitvated editable.

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.

The Sidebar provides tabs. You may define the name of your tabs as key. The following example defines a toolbar with the 2 tabs attributes and comments. The name of the tabs is passed to i18n which translates them to the currently displayed language. The attributes tab has on component attributepanel. You may define the components that should be rendered by the group.


Aloha.settings.sidebar = {
    tabs: {
    	attributes : [ 'attributepanel'],
		comments: [ 'comments' ]
	}
}

	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.sidebar = {
    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