Inline Editing¶

After the frontend editing have been activated from within the TYPO3 backend there are one scenario that needs to been taking into account. It is what kind of templating engine are used for the frontend template for the websites that you are using.

CSS Styled Content¶

If the installation are using the well known (and old) extension which is called css_styled_content are being used. The functionality comes straight out of the box and the editing can start directly.

Fluid Styled Content¶

Basic Fluid Styled Content override templates with frontend editing enabled are included. To use them, include the static TypoScript template “Editable Fluid Styled Content v9”. The templates are based on Fluid Styled Content for TYPO3 v9. Templates for other versions may be included in the future.

Note:

If fluid_styled_content is not included on the website or is disabled, the Typoscript of editIcons must be set manually.

lib.fluidContent {
        stdWrap {
                editIcons = tt_content:header
        }
}

When it comes to fluid_styled_content there are some things that needs to be adjusted to your template to get the editing to work. First of all there is a view helper that needs to be included and configured.

Namespace:

<html xmlns:core="http://typo3.org/ns/TYPO3/CMS/FrontendEditing/ViewHelpers"
      data-namespace-typo3-fluid="true">

</html>

First, find the content that you want editable and wrap it with the view helper:

The available options are:

table: The database table name to where the data should be saved
field: The database field to where the data should be saved (optional)
uid: The database field to where the data should be saved

A full example for inline editing of a certain field looks like this:

<core:contentEditable table="{item.table}" field="{item.field}" uid="{item.uid}">
        {item.bodytext}
</core:contentEditable>

The output would then look like the following in frontend edit mode:

<div contenteditable="true" data-table="tt_content" data-field="bodytext" data-uid="1">
        This is the content text to edit
</div>

While not in frontend edit mode the output are the following:

This is the content text to edit

There is also a possibility to make the content element editable through the popup backend editor. It is done by skipping the field option in the view helper:

<core:contentEditable table="tt_content" uid="{data.uid}">
        {item.bodytext}
</core:contentEditable>

TypoScript¶

If you are listing elements with TypoScript only, you can still include the editing icons using the included hook into TYPO3 rendering process. This example lists editable the frontend user names and emails:

page.20 = CONTENT
page.20 {
        table = fe_users
        select.pidInList = 38
        renderObj = COA
        renderObj.10 = TEXT
        renderObj.10 {
                field = username
                wrap = Username:|<br/>
                stdWrap.editIcons = fe_users: username
                stdWrap.editIcons.beforeLastTag = 1
        }
        renderObj.20 = TEXT
        renderObj.20 {
                field = email
                wrap = Email:|<br/><br/>
                stdWrap.editIcons = fe_users:email
                stdWrap.editIcons.beforeLastTag = 1
        }
        stdWrap.editIcons = pages:users
        stdWrap.editIcons.hasEditableFields = 1
}

TypoScript custom record editing¶

There is a possibility to use the edit button when a single extension record is present. What then will happen is that an editor clicks the edit button and a modal with the form engine for the records is displayed instead of the plugin setup.

For example in this case a configuration is added so that it is possible to edit a single news record. As long as an extension have records it is possible to add any kind of records.

Frontend editing is shipped so that the news extension is editable out of the box!

config {
    tx_frontendediting {
        customRecordEditing {
            tx_news_pi1 {
                actionName = detail
                recordName = news
                tableName = tx_news_domain_model_news
                listTypeName = news_pi1
            }
        }
    }
}

View Helpers¶

contentEditable¶

Enable frontend editing for records in fluid.

Example:

<core:contentEditable table="tt_content" field="bodytext" uid="{item.uid}">
    {item.bodytext}
</core:contentEditable>

Output:

<div contenteditable="true" data-table="tt_content" data-field="bodytext" data-uid="1">
    This is the content text to edit
</div>

Example with RTE links parsed:

When not using lib.parseFunc internal links will have the following format t3://page?uid=1

<core:contentEditable table="tt_content" field="bodytext" uid="{item.uid}">
     <f:format.html parseFuncTSPath="lib.parseFunc">
         {item.bodytext}
     </f:format.html>
</core:contentEditable>

Output:

<div contenteditable="true" data-table="tt_content" data-field="bodytext" data-uid="1">
    This is the content text to edit <a href="https://mydomain.com/path/to/page">My parsed link</a>
</div>

A full example on how to get a news single record content editable can be found here. Note that the headline, teaser and description are inline editable.

https://gist.github.com/MattiasNilsson/903b5cfe770fa9eadafd3d4de2c32895

customDropZone¶

Inserts a custom drop zone. Read more: Custom Records

isFrontendEditingActive¶

Useful to determine whether or not frontend editing is active. Use in conditions to hide or show content for editors.

Example:

<f:if condition="{core:isFrontendEditingActive()}">
   <p>You're using Frontend Editing. Congratulations!</p>
</f:if>

No output if Frontend editing is disabled. Output if Frontend Editing is enabled:

<p>You're using Frontend Editing. Congratulations!</p>

isPlaceholderEnabled¶

Use this view helper in conditions to show empty fields when the placeholder feature is enabled.

Example:

<f:if condition="{header} || {core:isPlaceholderEnabled()}">
  {header}
</f:if>