Frontend Edit

Extension key

xima_typo3_frontend_edit

Package name

xima/xima-typo3-frontend-edit

Version

1.5

Language

en

Author

Konrad Michalik & contributors

License

This extension documentation is published under the CC BY-NC-SA 4.0 (Creative Commons) license.

This extension provides an edit button for editors within frontend content elements.

Introduction

What does it do?

This extension provides an edit button for editors within frontend content elements.

The extension has been developed to provide a simple and lightweight solution to easily start the editing of content elements from the frontend and thus reduce the gap between frontend and backend. Therefore a simple javascript is injected into the frontend, which generates action links to the TYPO3 backend with the corresponding edit views.

Note

This is not a further development of the "original" extension frontend_editing. It is similar in some ways to the realisation of the feedit extension. This extension is an independent implementation with a different approach.

Installation

composer require xima/xima-typo3-frontend-edit

@import 'EXT:xima_typo3_frontend_edit/Configuration/TypoScript/setup.typoscript'

Configuration

The extension is ready to use without any further setup.

You can also adapt the extension to your needs, switch single menu entries and also disable the functionality.

Learn what configuration options are available on the following pages:

TypoScript

Adjust the typoscript constants to restrict the usage of the frontend edit:

plugin.tx_ximatypo3frontendedit {
    settings {
        # Ignore content elements by several criteria
        ignorePids =
        ignoreCTypes =
        ignoreListTypes =
        ignoreUids =

        # Adjust the default menu structure by setting an entry to "0" to disable it
        defaultMenuStructure {
            div_info =
            header =
            div_edit =
            edit =
            edit_page =
            div_action =
            hide =
            move =
            info =
            history =
        }
    }
}

User Settings

Go to User Settings > Edit and advanced functions > Disable frontend edit

The following options can be set in the user settings:

How it works

On page load a script calls an ajax endpoint, to fetch information about all editable (by the current backend user) content elements on the current page.

The script then injects (if it's possible) an edit menu into the frontend for each editable content element.

This is only possible, if the content element "c-ids" (Content Element IDs) are available in the frontend template, e.g. "c908". By default the fluid styled content elements provide these ids.

<div id="c10" class="frame frame-default frame-type-textpic frame-layout-0">
    ...
</div>

The rendered dropdown menu links easily to the corresponding edit views in the TYPO3 backend.

For an easy edit workflow a "save and close" button is added to the edit form, which redirects the user directly back to the frontend. Disable this function within the extension settings, if you don't want this behaviour.

Developer corner

Two opportunities exists to extend the dropdown menu with custom entries:

• Use an event to modify the menu directly
• Use a viewhelper to extend the menu with data entries

Additionally, you can provide a custom css file to adjust the styling.

PSR-14 Events

Use the FrontendEditDropdownModifyEvent to modify the edit menu to your needs. You can add, remove or modify buttons for specific content elements. See the example below:

<?php

declare(strict_types=1);

namespace Vendor\Package\EventListener;

use TYPO3\CMS\Backend\Routing\UriBuilder;
use TYPO3\CMS\Core\Imaging\IconFactory;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use Xima\XimaTypo3FrontendEdit\Enumerations\ButtonType;
use Xima\XimaTypo3FrontendEdit\Event\FrontendEditDropdownModifyEvent;
use Xima\XimaTypo3FrontendEdit\Template\Component\Button;

class ModifyFrontendEditListener
{
    public function __construct(protected readonly IconFactory $iconFactory, protected readonly UriBuilder $uriBuilder)
    {
    }

    public function __invoke(FrontendEditDropdownModifyEvent $event): void
    {
        $contentElement = $event->getContentElement();
        $menuButton = $event->getMenuButton();

        // Example 1
        // Append a custom button (after the existing edit_page button) for your plugin to e.g. edit the referenced entity
        if ($contentElement['CType'] === 'list' && $contentElement['list_type'] === 'custom_plugin_name') {
            $menuButton->appendAfterChild(new Button(
                'Edit entity',
                ButtonType::Link,
                $this->uriBuilder->buildUriFromRoute(
                    'record_edit',
                    [
                        'edit' => [
                            'custom_entity' => [
                                $contentElement['custom_entity_uid'] => 'edit',
                            ],
                        ],
                        'returnUrl' => $event->getReturnUrl(),
                    ],
                )->__toString(),
                $this->iconFactory->getIcon('content-idea', 'small')
            ),
            'edit_page',
            'edit_custom_entity'
            );
        }

        // Example 2
        // Remove existing buttons
        $menuButton->removeChild('div_action');

        $event->setMenuButton($menuButton);
    }
}

Don't forget to register your event listener via PHP attributes (TYPO3 >= 13):

#[AsEventListener(
    identifier: 'ext-some-extension/modify-frontend-edit-listener',
)]

or register the event listener in your Services.yaml:

services:
Vendor\Package\EventListener\ModifyFrontendEditListener:
    tags:
        - name: event.listener
            identifier: 'ext-some-extension/modify-frontend-edit-listener'

Data Attributes

Additionally, there is an option to extend your fluid template to provide data for extra dropdown menu entries, e.g. edit links to all news entries within a list plugin.

<div class="news-item">
    ...
    <xtfe:data label="{news.title}" uid="{news.uid}" table="tx_news_domain_model_news" icon="content-news" />
</div>

This generates a hidden input element with the provided data (only if the frontend edit is enabled). Within the parent content element (e.g. the whole list plugin), a new "data" section will show up on the dropdown menu to list all edit links.

Keep in mind, that this only works if the parent content element has a c-id and offer one of the following data combinations:

• Edit record link (provide uid and table of the desired record, the link to the TYPO3 backend will be generated automatically)
• Custom edit url (provide a custom url)

Custom Styling

The dropdown was styled to not disturb the frontend layout. You can easily adjust the styling by providing an additional css or js file within your ext_localconf.php which will be loaded together with the frontend edit resources:

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['xima_typo3_frontend_edit']['registerAdditionalFrontendResources'][] = 'EXT:custom_extension/Resources/Public/Css/Custom.css';

FAQ