TYPO3 RTE链接自定义属性或任意CSS类的实现方案咨询

针对你需要为链接添加Plausible统计类名（如plausible-event-name=foo）的需求，以下是几个低兼容性风险、覆盖全链接类型的可行方案：

方案1：通过RTE自定义JS替换类选择框为输入框 #

无需修改核心代码，通过前端JS扩展修改链接弹窗的表单控件：

1. 在你的扩展中创建JS文件（如Resources/Public/JavaScript/RteLinkClassInput.js），编写逻辑替换类选择框：

document.addEventListener('DOMContentLoaded', function() {
    // 监听链接弹窗加载事件
    document.addEventListener('typo3:link-browser:ready', function(e) {
        const classSelect = e.target.querySelector('select[name="parameters[class]"]');
        if (!classSelect) return;
        
        // 创建输入框+下拉选项的组合控件
        const container = document.createElement('div');
        const input = document.createElement('input');
        input.type = 'text';
        input.name = 'parameters[class]';
        input.value = classSelect.value;
        input.placeholder = '输入自定义类名（如plausible-event-name=xxx）';
        
        // 保留原有下拉选项作为快捷选择
        classSelect.style.display = 'block';
        classSelect.addEventListener('change', function() {
            input.value = this.value;
        });
        
        container.appendChild(input);
        container.appendChild(classSelect);
        classSelect.parentNode.replaceChild(container, classSelect);
    });
});

2. 在RTE配置yaml中引入这个JS：

editor:
  config:
    importModules:
      - { name: 'your_extension/rte-link-class-input', path: '/typo3conf/ext/your_extension/Resources/Public/JavaScript/RteLinkClassInput.js' }

3. 后端放行自定义类名，在ext_localconf.php添加：

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['t3lib/class.t3lib_parsehtml.php']['modifyAttributes']['plausible_allow_class'] = function($attributes, $tag) {
    if ($tag === 'a' && isset($attributes['class'])) {
        return $attributes;
    }
    return $attributes;
};

该方案兼容所有链接类型，编辑可自由输入类名，同时保留原有预定义类的快捷选择。

方案2：用链接处理器装饰器扩展所有链接类型 #

基于TYPO3官方的链接处理器机制，包装现有链接类型以添加自定义输入字段：

1. 创建装饰器类（以外部链接为例）：

namespace YourVendor\YourExtension\LinkHandler;

use TYPO3\CMS\Recordlist\LinkHandler\ExternalLinkHandler;

class DecoratedExternalLinkHandler extends ExternalLinkHandler
{
    public function renderForm(): string
    {
        // 先渲染原有表单
        $form = parent::renderForm();
        // 添加自定义类名输入框
        $form .= '<div class="form-group">
            <label for="plausible-class">自定义类名</label>
            <input type="text" name="parameters[class]" id="plausible-class" value="' . htmlspecialchars($this->linkParameterProvider->getParameter('class') ?? '') . '">
        </div>';
        return $form;
    }
}

2. 在ext_localconf.php中注册装饰器覆盖所有默认链接类型：

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['linkHandler']['page'] = \YourVendor\YourExtension\LinkHandler\DecoratedPageLinkHandler::class;
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['linkHandler']['external'] = \YourVendor\YourExtension\LinkHandler\DecoratedExternalLinkHandler::class;
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['linkHandler']['file'] = \YourVendor\YourExtension\LinkHandler\DecoratedFileLinkHandler::class;

此方案遵循TYPO3扩展规范，兼容性强，覆盖所有链接类型的表单渲染。

方案3：后端钩子自动转换title字段为类名 #

若暂时不想修改前端，可通过后端钩子将编辑在title字段中输入的标记转换为类名：

1. 创建钩子类：

namespace YourVendor\YourExtension\Hooks;

use TYPO3\CMS\Core\DataHandling\DataHandler;

class PlausibleLinkHook
{
    public function processDatamap_postProcessFieldArray($status, $table, $id, &$fieldArray, DataHandler &$pObj)
    {
        if ($table !== 'tt_content' || !isset($fieldArray['bodytext'])) return;
        
        // 解析HTML，提取title中的plausible标记并转换为类名
        $dom = new \DOMDocument();
        libxml_use_internal_errors(true);
        $dom->loadHTML($fieldArray['bodytext']);
        libxml_clear_errors();
        
        foreach ($dom->getElementsByTagName('a') as $link) {
            $title = $link->getAttribute('title');
            if (strpos($title, 'plausible:') === 0) {
                $eventName = substr($title, 9);
                // 添加类名
                $existingClass = $link->getAttribute('class');
                $link->setAttribute('class', trim($existingClass . ' plausible-event-name=' . $eventName));
                // 移除title中的标记
                $link->setAttribute('title', trim(str_replace('plausible:' . $eventName, '', $title)));
            }
        }
        
        $fieldArray['bodytext'] = $dom->saveHTML();
    }
}

2. 在ext_localconf.php注册钩子：

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['t3lib/class.t3lib_tcemain.php']['processDatamapClass']['plausible_link'] = \YourVendor\YourExtension\Hooks\PlausibleLinkHook::class;

编辑只需在链接title中输入plausible:foo，后端自动转换为plausible-event-name=foo类，无前端修改成本。

内容的提问来源于stack exchange，提问作者fishbone