Aloha Editor

Aloha Editor Guides

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

Sidebar

The Sidebar is an HTML container you can use in your own implementation.

1 Overview

Aloha Editor comes with two preconfigured Sidebars that can be referenced via the Aloha.Sidebar.* property:


Aloha.Sidebar.left; // references the left Sidebar
Aloha.Sidebar.right; // references the right Sidebar

Aloha Editor’s Sidebar acts as a container for Panels where you can put html content like forms. It comes with an API that allows you to control all of its functions:


// slide the right sidebar open
Aloha.Sidebar.right.open();

You can use the following Sidebar methods in your implementations:

Method Description
show() Show the Sidebar
hide() Hide the Sidebar
getPanelById(id) Retrieve a Panel by it’s id
open() Slide the Sidebar open
close() Close the Sidebar
activatePanel(panel, element) Activates a panel. Expects a panel’s id or the actual object for panel, and a jQuery object for element. element is the object the Panel was activated from (e.g. a button)
expandPanel(panel, callback) Expands a panel. Put a panel’s id or the actual Panel object for panel. You can add a callback that triggers after the animation completes
collapsePanel(panel, callback) Collapse a panel. Put a panel’s id or the actual Panel object for panel. You can add a callback that triggers after the animation completes
addPanel(panel) Add a new Panel to the sidebar. Specify your options as an object in panel. Also see Sidebar Panels for additional information

Each Sidebar is made of Panels that act as containers for your HTML code. Panels provide an API for you to interact with them.

To add a new Panel to a Sidebar use the Sidebar’s addPanel() method and specify your options in an object:


var panel = Aloha.Sidebar.right.addPanel({
	// the id of your new Panel
	id: 'new-panel',
	// title to be set for your Panel
    title     : 'Sidebar Demo Panel',
    // initial html content of your panel
    content     : '<p>Demo content!</p>',
    // whether the panel should be expanded initially
    expanded : true
});

3.1 Panel API

You can use the following Panel methods in your implementations:

Method Description
activate() Shows the Panel
deactivate() Hides the Panel
expand() Expands the panel to display it’s contents
collapse() Collapses the panel so only it’s title bar is displayed
setTitle(html) Update the Panel’s title
setContent(html) Update the Panel’s content