Aloha World! Getting Started
The Aloha World example is a simple web page including the Aloha Editor for editing title, teaser, and content sections of the web page.
When in the so called designMode a document or part of its elements which have been configured to be editable can be modified directly in the browser.
A hover effects indicates the Editables of the web page with colored outlines, inviting you to easily perform the necessary changes on the content.
Just click to start editing!
As soon as you activate the editable, the Floating Menu will appear above the text to provide you with formatting options. The Floating Menu will adjust it’s position according to your text cursor. If you want to pin the Floating Menu in place, you can achieve this by using the pin icon in the upper right corner of the panel.
After you clicked inside an Editable, a cursor will appear. Start typing and using keyboard controls to add and modify text.
By selecting a certain part of the text the Floating Menu will provide you with all possible formatting to be applied within the “Format” tab. You may also want to switch to the “Insert” tab, which allows you to insert new content elements such as tables. By clicking the respective buttons in the Floating Menu, a formatting can be applied and removed. If a formatting has already been applied to your text, the Floating Menu will display the corresponding buttons in pressed state, to reflect the markup.
The Floating Menu also provides you with a Word-like button which is used to apply different headings or paragraph styles. You can also expand this dialog by clicking the icon on it’s right-hand side.
Some formattings (like paragraphs, headlines and lists) will replace other formattings. E.g. when you click “h1” when the cursors is inside a paragraph, the paragraph will be replaced by the heading.
Another core plugin of Aloha is the Table plugin available from the “Insert” tab. A table is added by selecting the corresponding icon in the floating menu of your editable area. By clicking the icon for “create table” a layer will open beneath the button and the size (rows and columns) of your table can be seleced. The table will be inserted at the given cursor position in your active editable area.
The table contents then can be edited by
- clicking into the respective table cells
- tabbing through the cells
- [Tab] Jumps into the ’’’next’’’ cell and selects its whole contents
- [Shift]+[Tab] Jumps into the ’’’previous’’’ cell and selects its whole contents
- selecting one or more columns/rows
- inserting new rows and columns
- deleting rows and columns
The text in the table can be formatted by using the available options in the floating menu.
Configuring the Aloha Editor for your web page is straight forward!
- Insert the Aloha Library
- Configure Aloha plugins, like the core plugins Format and Table
- Define Editables
<!-- load aloha -->
<script type="text/javascript" src="../core/aloha-0.0.111.js"></script>
<!-- configure Aloha Plugin Settings -->
<script type="text/javascript">
GENTICS.Aloha.settings = {
"i18n": {"current": "en"},
"plugins": {
"com.gentics.aloha.plugins.Format": {
config : [ 'b', 'i','u','del','sub','sup', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat'],
editables : {
title : [ ], // no formatting allowed
teaser : [ 'b', 'i', 'u', 'del', 'sub', 'sup' ] // just basic formattings, no headers, etc.
}
}
}
};
<!-- turn elements into editable Aloha coninous text -->
$(document).ready(function() {
$('#title').aloha();
$('#teaser').aloha();
$('#content').aloha();
});
</script>
The Aloha editor is able to support any DOM Element, not just div-Tags: In the Aloha World example title, teaser, and content sections are realized with div and h1 HTML tags.
The configuration of the Format plugin shows that, different formatting options can be configured for the editables. This way, whil the title can not be formatted, the teaser section allows basic formatting (e.g. bold, italic, etc.), in the content section the Floating Menu provides all available options.