Frontend Edit 

Extension key

xima_typo3_frontend_edit

Package name

xima/xima-typo3-frontend-edit

Version

2.0

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 menu for editors within the frontend regarding content elements and pages.

Introduction 

What does it do? 

This extension provides an edit menu for editors within the frontend regarding content elements and pages.

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.

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 Edit Menu links to the corresponding edit views in the TYPO3 backend.

Installation 

composer require xima/xima-typo3-frontend-edit

Configuration 

The extension is ready to use without any further setup.

You can also adapt the extension to your needs and disable the functionality for specific pages or content types.

Learn what configuration options are available on the following pages:

Site Settings 

All configuration options are managed via TYPO3 Site Settings. This provides site-specific configuration and better caching behavior.

Configuration is done in your site's config/sites/<site-identifier>/settings.yaml file or via the TYPO3 backend in Site Management > Sites > Edit site > Settings.

frontendEdit:
  enabled: true
  colorScheme: 'auto'
  showContextMenu: true
  showStickyToolbar: true
  toolbarPosition: 'bottom-right'
  enableOutline: true
  enableScrollToElement: true
  filter:
    ignorePids: '1,2,3'
    ignoreDoktypes: '4,199,254'
    ignoreCTypes: 'html,div'
    ignoreListTypes: ''
    ignoreUids: ''

Extension configuration 

1. Go to Admin Tools > Settings > Extension Configuration
2. Choose xima_typo3_frontend_edit

The extension currently provides the following configuration options:

Usage 

Once installed and configured, the extension provides two main editing interfaces in the frontend for logged-in backend users.

Edit Menu 

Each content element on the page displays an edit button when you hover over it.

Clicking this button opens the Edit Menu with various actions:

• Edit Content Element - Open the content element in the backend editor
• Edit page - Open the current page properties
• Hide/Unhide - Toggle visibility of the content element
• Info - Display content element information
• Move - Reorder the content element
• History - View the content element's history
• New content after - Add a new content element after this one

<div id="c{data.uid}">
    ...
</div>

Toolbar 

The Toolbar provides quick access to page-level actions. It appears at a configurable position on the screen (default: bottom-right).

Actions 

The Toolbar includes:

• Toggle - (eye icon) Enable or disable frontend editing for the current session
• Edit page properties - Open the current page properties
• Edit page - Open the page module in the backend
• Info - Display page information
• Move - Reorder page

frontendEdit:
  toolbarPosition: 'bottom-right'

Developer corner 

Two opportunities exist to extend the Edit Menu with custom entries:

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

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

PSR-14 Events 

The extension provides two PSR-14 events to customize the Edit Menu and Toolbar.

<?php

declare(strict_types=1);

namespace Vendor\Package\EventListener;

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

#[AsEventListener(
    identifier: 'my-extension/modify-edit-menu',
)]
class ModifyEditMenuListener
{
    public function __construct(
        protected readonly IconFactory $iconFactory,
        protected readonly UriBuilder $uriBuilder
    ) {}

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

        // Add a custom button for a specific plugin
        if ($contentElement['CType'] === 'list' && $contentElement['list_type'] === 'news_pi1') {
            $menuButton->appendAfterChild(new Button(
                'Edit news settings',
                ButtonType::Link,
                $this->uriBuilder->buildUriFromRoute(
                    'record_edit',
                    [
                        'edit' => ['tt_content' => [$contentElement['uid'] => 'edit']],
                        'returnUrl' => $event->getReturnUrl(),
                    ],
                )->__toString(),
                $this->iconFactory->getIcon('content-news', 'small')
            ),
            'edit_page',
            'edit_news_settings'
            );
        }

        // Remove a button
        $menuButton->removeChild('div_action');

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

<?php

declare(strict_types=1);

namespace Vendor\Package\EventListener;

use TYPO3\CMS\Backend\Routing\UriBuilder;
use TYPO3\CMS\Core\Attribute\AsEventListener;
use TYPO3\CMS\Core\Imaging\IconFactory;
use Xima\XimaTypo3FrontendEdit\Enumerations\ButtonType;
use Xima\XimaTypo3FrontendEdit\Event\FrontendEditPageDropdownModifyEvent;
use Xima\XimaTypo3FrontendEdit\Template\Component\Button;

#[AsEventListener(
    identifier: 'my-extension/modify-toolbar',
)]
class ModifyToolbarListener
{
    public function __construct(
        protected readonly IconFactory $iconFactory,
        protected readonly UriBuilder $uriBuilder
    ) {}

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

        // Add a custom page action
        $menuButton->appendChild(new Button(
            'Clear page cache',
            ButtonType::Link,
            $this->uriBuilder->buildUriFromRoute(
                'tce_db',
                [
                    'cacheCmd' => $event->getPageId(),
                    'redirect' => $event->getReturnUrl(),
                ],
            )->__toString(),
            $this->iconFactory->getIcon('actions-system-cache-clear', 'small')
        ),
        'clear_cache'
        );

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

Data Attributes 

Additionally, there is an option to extend your fluid template to provide data for extra Edit 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 in the Edit 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 Edit Menu 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 

<div class="dce" id="c{contentObject.uid}">
    Your template goes here...
</div>

<div id="c{data.uid}">
   <f:for each="{children_200}" as="record">
       {record.header} <br>
       <f:format.raw>
           {record.renderedContent}
       </f:format.raw>
   </f:for>
</div>

<f:layout name="Default" />

<f:section name="Main">
  <f:for each="{children_200}" as="record">
      {record.header} <br>
      <f:format.raw>
          {record.renderedContent}
      </f:format.raw>
  </f:for>
</f:section>

Migration Guide 

This guide helps you migrate between major versions of the extension.

frontendEdit:
  showContextMenu: false

use TYPO3\CMS\Core\Attribute\AsEventListener;
use Xima\XimaTypo3FrontendEdit\Event\FrontendEditDropdownModifyEvent;

#[AsEventListener]
final class ModifyMenu
{
    public function __invoke(FrontendEditDropdownModifyEvent $event): void
    {
        $event->getMenuButton()->removeChild('history');
    }
}