Aloha Editor

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

Configure Aloha Editor

After reading this guide, you will be able to:

  • Add configuration settings to you page and
  • Adapt Aloha Editor to your needs by means of configuration

1 Basic Configuration

Please write sth.!

2 Configuring the FloatingMenu

The floating menu can be adapted to your needs by configuring tabs, groups and buttons. You may reassemble all of the existing buttons provided by plugins in any combination you want.

A button may only be added once to the configuration. Adding the same button twice will yield no results exept raising a warning message.

The following simple example should help to understand how to configure the FloatingMenu. Basically, all you have to do is define an array of button names (those are provided by plugins). As you might have noticed, groups may be named in our example (“flow”, “phrasing” or “first”). However, at this time naming groups yields no visual result in the current FloatingMenu. It will just help you structure your configuration.


<head>
<script type="text/javascript">
Aloha.settings.toolbar = {
	tabs : {
		// will generate a tab labeled "formatting"
		formatting : {
			// group "flow"
			flow : [ 'b', 'em', 'u' ],
			// group "phrasing"
			phrasing : [ 'phrasing' ] // "phrasing" is the name of a 
			// MultiSplitButton from the format plugin, which contains 
			// elements like h1 ...
		},
		// will generate another tab labeled "insert"
		insert : {
			// as mentioned group names are not displayed anywhere,
			// so you might pick an arbitrary name
			first : [ 'image', 'insertLink' ]
		}
	},
	components : {
		// the phrasing MultiSplitButton is configured the same way 
		// as groups are
		phrasing : [ 'h1', 'h2', 'h3' ]
	}
};
</script>
</head>

The following are configuration options are available for the behaviour of the floating menu.


<head>
<script type="text/javascript">
Aloha.settings.floatingmenu = {
	width: 630, // with of the floating menu; auto calculated when not set
	behaviour: 'float', // 'float' (default), 'topalign', 'append'
	element: 'my-html-element-id', // use with 'append' behaviour option: HTML DOM ID of the element the FM should get the position from
	pin: false, // boolean if set to true with behaviour 'append' the fm will be pinned to that position and scroll with the window
	draggable: true, // boolean
	marginTop: 10, // number in px
	horizontalOffset: 0, // number in px -- used with 'topalign' behaviour
	topalignOffset: 0, // number in px -- used with 'topalign' behaviour
	
};
</script>
</head>