.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt =========================== Frontend editing with aloha =========================== :Created: 2010-02-18T17:33:18 :Changed by: Georg Ringer :Changed: 2011-10-06T11:17:09.030000000 :Classification: aloha :Keywords: forAdmins, forBeginners, forIntermediates :Author: Georg Ringer :Email: aloha@cyberhouse.at :Info 4: :Language: en |img-1| |img-2| Frontend editing with aloha - aloha .. _Frontend-editing-with-aloha: Frontend editing with aloha =========================== Extension Key: aloha Language: en Keywords: forAdmins, forBeginners, forIntermediates Copyright 2000-2011, Georg Ringer, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.org .. _Table-of-Contents: Table of Contents ----------------- `Frontend editing with aloha 1 <#__RefHeading__629_1515241928>`_ **`Introduction 3 <#__RefHeading__631_1515241928>`_** `What does it do? 3 <#__RefHeading__633_1515241928>`_ `Screenshots 3 <#__RefHeading__637_1515241928>`_ `Presented by CYBERHOUSE 5 <#__RefHeading__2289_786103024>`_ `Bugs & Features 5 <#__RefHeading__1026_1515241928>`_ **`Users manual 6 <#__RefHeading__639_1515241928>`_** `Installation & Enabling 6 <#__RefHeading__641_1515241928>`_ **`Configuration 7 <#__RefHeading__647_1515241928>`_** `TypoScript 7 <#__RefHeading__2456_786103024>`_ `Aloha configuration 7 <#__RefHeading__2618_786103024>`_ **`Extended 9 <#__RefHeading__2454_786103024>`_** `Using Aloha with Fluid 9 <#__RefHeading__1952_565302704>`_ `Adding custom headers 9 <#__RefHeading__483_1984300750>`_ .. _Introduction: Introduction ------------ .. _What-does-it-do: 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. .. _Features-What-is-possible: Features / What is possible """"""""""""""""""""""""""" - Inline editing of text of the content elements “Text”, “Text with Images”, “Table”, “List” - Inline editing of all headers of content elements. - Inline editing wherever it is enabled by using - TypoScript for pibased based extensions & fields. - An integrated ViewHelper for fluid based extensions - Different possibilities for saving changes: - **Directly:** Every change is directly saved in the database - **Intermediate:** Changes are saved only if a Save-Button is pressed. .. _Screenshots: Screenshots ^^^^^^^^^^^ |img-3| **Image 1** : Editable areas are outlined |img-4| **Image 2** : Inline editing let you see the impact of the changes without any drawbacks |img-5| **Image 3** : Available options depend on the editable area. Headers must not be styled by the editor but by the CMS |img-6| **Image 4:** TYPO3 specific actions .. _Presented-by-CYBERHOUSE: Presented by CYBERHOUSE ^^^^^^^^^^^^^^^^^^^^^^^ This extension has been created by CYBERHOUSE, a TYPO3 agency from Linz, Austria: `http://www.cyberhouse.at/ `_ `|img-7| `_ .. _Bugs-Features: Bugs & Features ^^^^^^^^^^^^^^^ Please use the bugtracker at forge to send your bug reports and feature requests: `forge.typo3.org/projects/extension-aloha/issues `_ . .. _Users-manual: Users manual ------------ .. _Installation-Enabling: 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 } .. _Configuration: Configuration ------------- .. _TypoScript: 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. .. ### BEGIN~OF~TABLE ### .. _field: field """"" .. container:: table-row Property field Description Field of the table where the content comes from and where it should be saved. .. _allow: allow """"" .. container:: table-row Property allow Description Comma separated list of allowed actions. Possible values are: move, edit, link, hide, unhide, newContentElementBelow, delete. You can also set “all” to allow all. .. _nostyles: nostyles """""""" .. container:: table-row Property nostyles Description Set it to 1 to allow no formatting styles of the content. This is e.g. useful for headers which must not be styled with bold, italic or whatever. .. _class: class """"" .. container:: table-row Property class Description Add an additional class which can be used in the frontend for an additional styling .. _style: style """"" .. container:: table-row Property style Description Similar to the property “class” but for setting an inline CSS style. .. _tag: tag """ .. container:: table-row Property tag Description Define which HTML element is used for adding the aloha editor. Default is div but you can set e.g. a span .. ###### END~OF~TABLE ###### .. _Aloha-configuration: 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. |img-8| The header templates holds the following files: .. ### BEGIN~OF~TABLE ### .. _AlohaIntegration-css: AlohaIntegration.css """""""""""""""""""" .. container:: table-row File AlohaIntegration.css Description Styling of the integration, especially the top bar .. _Aloha-css: Aloha.css """"""""" .. container:: table-row File Aloha.css Description Styling of aloha itself .. _Configuration-js: Configuration.js """""""""""""""" .. container:: table-row File Configuration.js Description Configuration of integration of Aloha .. _Loading-js: Loading.js """""""""" .. container:: table-row File Loading.js Description General JS stuff needed for aloha to work .. ###### END~OF~TABLE ###### .. _Extended: Extended -------- .. _Using-Aloha-with-Fluid: 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: :: {newsItem.teaser} .. ### BEGIN~OF~TABLE ### .. _table: table """"" .. container:: table-row Argument table Description Name of the database table .. _field: field """"" .. container:: table-row Argument field Description Name of the field inside the table .. _uid: uid """ .. container:: table-row Argument uid Description UID of the record .. _configuration: configuration """"""""""""" .. container:: table-row Argument configuration Description Optional configuration, see chapter “Configuration” for an explanation. .. ###### END~OF~TABLE ###### .. _Adding-custom-headers: 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. |img-9| 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. .. _Styling: Styling """"""" CSS is used to change the image in the panel to visualize the different output. An additional class which is built out of the tag name and the additional class can be used: :: 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; } |img-2| 9 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 21 .. :hspace: 9 .. :id: Grafik2 .. :name: Grafik2 .. :width: 87 .. |img-3| image:: img-3.jpeg .. :align: left .. :border: 0 .. :height: 397 .. :id: Grafik3 .. :name: Grafik3 .. :width: 669 .. |img-4| image:: img-4.jpeg .. :align: left .. :border: 0 .. :height: 303 .. :id: Grafik4 .. :name: Grafik4 .. :width: 468 .. |img-5| image:: img-5.jpeg .. :align: left .. :border: 0 .. :height: 172 .. :id: Grafik5 .. :name: Grafik5 .. :width: 457 .. |img-6| image:: img-6.jpeg .. :align: left .. :border: 0 .. :height: 269 .. :id: Grafik7 .. :name: Grafik7 .. :width: 441 .. |img-7| image:: img-7.jpeg .. :align: left .. :border: 0 .. :height: 94 .. :name: HTTP://WWW.CYBERHOUSE.AT/ .. :width: 450 .. |img-8| image:: img-8.png .. :align: left .. :border: 0 .. :height: 344 .. :id: Grafik1 .. :name: Grafik1 .. :width: 597 .. |img-9| image:: img-9.jpeg .. :align: left .. :border: 0 .. :height: 103 .. :id: Grafik8 .. :name: Grafik8 .. :width: 429