The Aloha Editor UI
After reading this guide, you will be able to:
- Understand how the Aloha UI works
- Configure your Aloha Editor UI
- Write your own Aloha Editor UI components
- Write your own Aloha Editor component types
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 What is the Aloha Editor UI
The Aloha Editor UI consists of 4 root containers. A container may accept components. A component is an implementation of a specific component type. The provided containers are:
- The Aloha.ui.toolbar provides context sensitive interaction items for main use. The toolbar may contain components in each group, where a tab contains groups.
- The Aloha.ui.sidebar provides attribute modification or extended functionality like commenting for more advanced users. The sidebar may contain components in each tab.
- The Aloha.ui.browser provides a default interface for assets available as objects in folders. See repository for more information. The browser may not contain components.
- The Aloha.ui.message provides an interaction container, which informs users about status or other issues. The message may not contain components.
Aloha Editor comes also with a set of components. Among those:
- The Aloha.ui.formatlink is a button componenttype that converts a selection into a link.
- The Aloha.ui.editlink is a combo autocompletion componenttype to modify the href of a anchor tag.
- The Aloha.ui.insertlink is a button componenttype that replaces the selection an inserts an anchor with a default text.
- The Aloha.ui.unlink is a button componenttype that removes the anchor tag if the selection starts inside an anchor tag.
- Aloha.ui.bold is a togglecommandbutton compontentype that removes the bold tag if the selections start in a bold tag or surrounds the word (if selection collapsed) or selection into a bold tag.
- and many more (see TODO link for more components)
The default Aloha Editor UI containers and components can be extended or replaced completely. All modifications of content are decoupled and available as commands. See the command api for more details on specific commands.
2 Configuring the Aloha Editor UI
Every Container and every component may have its own configuration settings. The containers and components come with default settings which are accessable in the namespace of the container or component. The values of settings are contianer and component specific.
Aloha.defaults.ui.container = { name: value }; Aloha.defaults.ui.component = { name: value };
You may define your site specific runtime settings may defining the settings for each container or component. The settings are assigned during the initialization stop of plugins.
see plugin lifecycle.
Aloha.settings.ui.container = { name: value }; Aloha.settings.ui.component = { name: value };
Further more every editable may have its own settings which you may pass as argument to the $('selector').aloha(settings) method.
$('.editable).aloha( { UI.component: { name: value } } );
3 Containers
How to initialize containers?
3.1 Toolbar
The Toolbar provides tabs and groups. 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' ] } } };
3.2 Sidebar
The Toolbar provides tabs and groups. 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: { attributes : [ 'attributepannel'], comments: [ 'comments' ] } }
3.3 Browser
3.4 Message
3.5 Commands
- emphasize – wrap contents in an <em> tag
- strong – wrap contents with a <strong> tag
- bold – wrap contents with a <b> tag
- italic – wrap contents with an <i> tag
- strikethrough – wrap contents with a <s> tag
- subscript – wrap contents with a <sub> tag
- superscript – wrap contents with a <superscript> tag
- underline – wrap contents with an <u> tag
- formatBlock (address, dd, div, dt, h1, h2, h3, h4, h5, h6, p, pre) – apply paragraph formatting to a block or selection
- removeFormat – removes formatting from selection
- September 1, 2011: Initial version by Haymo Meran and Scott Gonzales