README

TYPO3扩展 xima_typo3_frontend_edit

此扩展为前端内容元素中的编辑器提供编辑按钮。

注意

这不是对“原始”扩展frontend_editing的进一步开发。它在某些方面类似于feedit扩展的实现。这是一个独立实现，采用了不同的方法。

此扩展的开发是为了提供一个简单、轻量级的解决方案，以便轻松从前端开始编辑内容元素，从而减少前后端之间的差距。因此，将一个简单的javascript注入到前端，它生成指向TYPO3后端相应编辑视图的动作链接。

安装

Composer

composer require xima/xima-typo3-frontend-edit

TER

从TYPO3扩展存储库（TER）下载zip文件。

配置

包含静态TypoScript模板“前端编辑”或直接将其导入到您的站点包中

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

调整常量以限制前端编辑的使用

plugin.tx_ximatypo3frontendedit {
  settings {
    ignorePids =
    ignoreCTypes =
    ignoreListTypes =
    ignoreUids =
  }
}

后端用户可以轻松地在他们的用户设置中禁用整个前端编辑功能。

用户设置 > 编辑和高级功能 > 禁用前端编辑

工作原理

页面加载时，一个脚本调用一个ajax端点，以获取有关当前页面上所有可编辑（由当前后端用户）的内容元素的详细信息。

然后脚本为每个可编辑的内容元素注入（如果可能）一个编辑菜单到前端。

这只有在前端模板中可用“c-ids”内容元素ID（例如“c908”）的情况下才可行。默认情况下，流体样式的内容元素提供了这些ID。

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

渲染的下拉菜单可以轻松链接到TYPO3后端中相应的编辑视图。

提示：只有当当前后端用户已登录时，才会注入脚本。

扩展

有两种方法可以扩展下拉菜单以包含自定义条目

1. 使用事件直接修改菜单
2. 使用视图助手通过 data 条目扩展菜单

事件

使用 FrontendEditDropdownModifyEvent 来根据您的需求修改编辑菜单。您可以为特定内容元素添加、删除或修改按钮。请参见下面的示例

<?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);
    }
}

数据属性

此外，还有一个选项可以扩展您的流体模板以提供额外下拉菜单条目的数据，例如列表插件中所有新闻条目的编辑链接。

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

这会生成一个带有提供的数据的隐藏输入元素（仅当前端编辑已启用时）。在父内容元素（例如整个列表插件）中，下拉菜单将出现一个新“data”部分以列出所有编辑链接。

请参阅DataViewHelper 获取更多信息。请注意，这仅适用于父内容元素具有c-id并提供以下数据组合之一的情况

1. 编辑记录链接（提供所需的记录的 uid 和 table，自动生成指向TYPO3后端的链接）
2. 自定义编辑URL（提供自定义 url）

请注意，此选项会将额外的HTML元素添加到您的DOM中，这可能导致样式问题。

常见问题解答

许可证

本项目根据GNU通用公共许可证2.0（或更新版）授权。