Frontend editing with aloha¶

What does it do?¶

This extension implements a powerful frontend editing by integrating the awesome Aloha . For the first time, true inline editing is possible within TYPO3 v4.

Screenshots¶

Image 1 : Editable areas are outlined

Image 2 : Inline editing let you see the impact of the changes without any drawbacks

Image 3 : Available options depend on the editable area. Headers must not be styled by the editor but by the CMS

Image 4: TYPO3 specific actions

Presented by CYBERHOUSE¶

This extension has been created by CYBERHOUSE, a TYPO3 agency from Linz, Austria: http://www.cyberhouse.at/

|img-7|

Bugs & Features¶

Please use the bugtracker at forge to send your bug reports and feature requests: forge.typo3.org/projects/extension-aloha/issues .

Installation & Enabling¶

The extension needs to be installed as any other extension of TYPO3. If you got a T3X file, just upload it in the Extension Manager and install the extension.

Add the Static TypoScript. There are 2 entries you need to select: “Aloha Basic” & “Aloha Modification”. You need both. More about those in the chapter “Configuration”,

Enable aloha in your TypoScript (Setup) by adding the lineconfig.aloha = 1

Enable aloha in your UserTsConfig by adding the linealoha = 1

If your editor wants to use aloha, he needs to actiivate it in the Admin Panel, therefore, the Admin Panel needs to be available too. You can use this lines in the UserTsConfig:

admPanel {
        enable.edit = 1
}

TypoScript¶

The integration of aloha requires a custom stdWrap option. It behaves similar to the property editIcons which is used to render the old frontend editing icons. Looking at running code is sometimes the fastest way to explain something, therefor you should take a look at the file Configuration/TypoScript/Modification/setup.txt .

All you need to get aloha running for the content element “Text” are those lines:

01 tt_content.text.20.editIcons.beforeLastTag = 0
02 tt_content.text.20.alohaProcess = 1
03 tt_content.text.20.alohaProcess {
04      field = bodytext
05      allow = all
06 }

For explanation :

Line 01: removes the icons of the old frontend editing.

Line 02: enables Aloha

Line 04: adds the field which holds the value. This field is used to save the changes.

Line 05: sets the actions which are allowed.

Aloha configuration¶

As aloha is done in JavaScript, the whole configuration is taking place in JavaScript too.

If you want to change the configuration, you need to change the template inside the Extension Manager's settings. The following screenshot shows the essential part.

Change the path of the template to one of your files.

The header templates holds the following files:

Using Aloha with Fluid¶

There is a custom ViewHelper if you want to make your fluid based extension editable through aloha.

Using it is very simple:

<aloha:editable table="tx_news_domain_model_news" field="teaser" uid="{newsItem.uid}" configuration="{nostyles: 1}">
        {newsItem.teaser}
</aloha:editable>

Adding custom headers¶

The default implementation makes it possible to use h1-h6 tags. Sometimes tags with additional classes are needed to allow more styling options for an editor.

For adding headers with classes, you need to change the settings inside the configuration.js.

01 "format": {
02      'h3' : ['fo', 'bar'],
03      config : [ 'b', 'i', 'sub', 'h1', 'h3','h3-1', 'h3-0','h2'],
04      editables : {
05              // no formatting allowed for title
06              '.nostyles'     : [ ]
07      }
08 },

Explanation

Line 02: There are 2 different h3 tags available: One with class “fo” and another one with “bar”.

Line 03: Those 2 need to be enabled by adding “h3-0” and “h3-1” to the allowed tags.

ul.aloha-multisplit button.h3-fo {
        background-image:url(../Images/h3-a.png) !important;
        background-position: center center !important;
}
ul.aloha-multisplit button.h3-bar {
        background-image:url(../Images/h3-b.png) !important;
        background-position: center center !important;
}