TYPO3 11/12扩展tt_content图片字段并添加外部图片按钮方法

核心思路 #

要给tt_content的image字段添加自定义外部图片加载按钮，需通过扩展FormEngine控件配置，结合自定义JavaScript交互和后端AJAX处理逻辑实现。以下分版本说明具体步骤：

TYPO3 11 实现步骤 #

1. 重载TCA字段控件配置
   在你的扩展Configuration/TCA/Overrides/tt_content.php中，修改image字段的控件配置，添加自定义按钮：

$GLOBALS['TCA']['tt_content']['columns']['image']['config']['appearance']['additionalButtons'][] = [
    'identifier' => 'external-image-loader',
    'title' => '加载外部图片',
    'icon' => 'actions-add-external-reference',
    'onClick' => 'TYPO3.CustomExternalImageLoader.openModal()',
];

2. 编写前端弹窗与交互逻辑
   创建Resources/Public/JavaScript/ExternalImageLoader.js，实现弹窗和外部图片导入的前端逻辑：

TYPO3.CustomExternalImageLoader = {
    openModal: function() {
        const modal = new TYPO3.Modal.modal({
            title: '加载外部图片',
            content: '<input type="url" id="external-image-url" placeholder="输入图片URL" style="width:100%;padding:8px;">',
            size: 'small',
            callback: function(currentModal) {
                const url = document.getElementById('external-image-url').value;
                if (!url) return;
                
                // 调用后端接口导入图片
                new TYPO3.AjaxRequest('/typo3/ajax/external-image-import', {
                    method: 'POST',
                    body: new URLSearchParams({
                        url: url,
                        folder: '/user_upload/',
                        '__csrf_token': TYPO3.settings.csrfToken
                    })
                }).then(async (response) => {
                    const data = await response.json();
                    if (data.success && data.fileUid) {
                        // 将导入的图片添加到当前字段（适配TYPO3 11字段结构）
                        const fieldControl = document.querySelector('[data-formengine-input-name*="image"]');
                        if (fieldControl) {
                            TYPO3.FormEngine.Validation.validate(fieldControl);
                            // 可参考原生图片字段的添加逻辑完成最终渲染
                        }
                        currentModal.hide();
                    }
                });
            },
            buttons: [
                {text: '取消', active: true, btnClass: 'btn-default', click: () => TYPO3.Modal.currentModal.hide()},
                {text: '导入', btnClass: 'btn-primary', click: () => TYPO3.Modal.currentModal.getCallback()(TYPO3.Modal.currentModal)}
            ]
        });
        modal.show();
    }
};

3. 注册前端资源与AJAX路由

• 在ext_localconf.php中引入前端资源：

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig(
    '<INCLUDE_TYPOSCRIPT: source="FILE:EXT:your_extension/Configuration/PageTS/BackendAssets.tsconfig">'
);

• 创建Configuration/PageTS/BackendAssets.tsconfig：

mod {
    JSFooterInline {
        10 = TEXT
        10.value = <script src="/typo3conf/ext/your_extension/Resources/Public/JavaScript/ExternalImageLoader.js"></script>
    }
}

• 注册AJAX路由Configuration/Backend/AjaxRoutes.php：

return [
    'external-image-import' => [
        'path' => '/external-image-import',
        'target' => \YourVendor\YourExtension\Ajax\ExternalImageImporter::class . '::import',
    ],
];

4. 编写后端图片导入逻辑
   创建Classes/Ajax/ExternalImageImporter.php，实现外部图片下载、存储：

<?php
namespace YourVendor\YourExtension\Ajax;

use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\ServerRequestInterface;
use TYPO3\CMS\Core\Resource\ResourceFactory;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Core\Http\JsonResponse;

class ExternalImageImporter
{
    public function import(ServerRequestInterface $request): ResponseInterface
    {
        $params = $request->getParsedBody();
        $url = $params['url'] ?? '';
        $folderIdentifier = $params['folder'] ?? '/user_upload/';

        if (!filter_var($url, FILTER_VALIDATE_URL)) {
            return new JsonResponse(['success' => false, 'message' => '无效的URL']);
        }

        try {
            $imageContent = GeneralUtility::getUrl($url);
            if (!$imageContent) throw new \Exception('无法下载图片');

            $resourceFactory = GeneralUtility::makeInstance(ResourceFactory::class);
            $folder = $resourceFactory->getFolderObjectFromCombinedIdentifier($folderIdentifier);
            
            $fileName = pathinfo(parse_url($url, PHP_URL_PATH), PATHINFO_BASENAME);
            $fileName = $folder->getUniqueName($fileName);
            
            $file = $folder->addFileFromString($imageContent, $fileName);

            return new JsonResponse([
                'success' => true,
                'fileUid' => $file->getUid(),
                'fileName' => $file->getName()
            ]);
        } catch (\Exception $e) {
            return new JsonResponse(['success' => false, 'message' => $e->getMessage()]);
        }
    }
}

TYPO3 12 实现步骤 #

TYPO3 12重构了FormEngine和前端模块体系，调整如下：

1. TCA字段配置
   Configuration/TCA/Overrides/tt_content.php中的按钮配置略有变化：

$GLOBALS['TCA']['tt_content']['columns']['image']['config']['appearance']['additionalButtons'][] = [
    'identifier' => 'external-image-loader',
    'title' => '加载外部图片',
    'iconIdentifier' => 'actions-add-external-reference',
    'onClick' => 'TYPO3.CustomExternalImageLoader.openModal()',
];

2. 编写ES模块风格的前端逻辑
   创建Resources/Public/JavaScript/ExternalImageLoader.js：

import { Modal } from '@typo3/backend/modal.js';
import { AjaxRequest } from '@typo3/core/ajax/ajax-request.js';

export class ExternalImageLoader {
    static openModal() {
        Modal.confirm('加载外部图片', '', {
            size: Modal.sizes.small,
            content: `
                <div class="form-group">
                    <input type="url" id="external-image-url" class="form-control" placeholder="输入图片URL">
                </div>
            `,
            callback: async (modal) => {
                const url = document.getElementById('external-image-url').value;
                if (!url) {
                    modal.hide();
                    return;
                }

                try {
                    const response = await new AjaxRequest(TYPO3.settings.ajaxUrls['external-image-import']).post({
                        url: url,
                        folder: '/user_upload/',
                    });
                    const data = await response.resolve();
                    if (data.success && data.fileUid) {
                        // 触发字段更新事件，适配TYPO3 12的FileReference控件
                        const fieldElement = document.querySelector('[data-formengine-input-name*="image"]');
                        if (fieldElement) {
                            const fileReferenceElement = fieldElement.closest('.t3js-formengine-field-item');
                            fileReferenceElement.dispatchEvent(new CustomEvent('externalImageAdded', { detail: { fileUid: data.fileUid } }));
                        }
                        modal.hide();
                    }
                } catch (error) {
                    Modal.error('错误', error.message);
                }
            },
            buttons: [
                {text: '取消', active: true, btnClass: 'btn-default', trigger: () => Modal.currentModal.hide()},
                {text: '导入', btnClass: 'btn-primary', trigger: () => Modal.currentModal.getCallback()(Modal.currentModal)}
            ]
        });
    }
}

TYPO3.CustomExternalImageLoader = ExternalImageLoader;

3. 注册前端模块与AJAX路由

• 在ext_localconf.php中注册ES模块：

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addJavaScriptModule(
    'your-extension/external-image-loader',
    'EXT:your_extension/Resources/Public/JavaScript/ExternalImageLoader.js',
    ['@typo3/backend/modal', '@typo3/core/ajax/ajax-request']
);

• AJAX路由和后端处理类与TYPO3 11基本一致，无需大幅修改。

注意事项 #

• 权限控制：确保后端用户拥有文件上传和编辑tt_content的权限，AJAX接口自动携带CSRF验证。
• 安全校验：后端需对下载的图片进行MIME类型验证，防止恶意文件上传。
• 兼容性：TYPO3 12前端依赖ES模块，需确保扩展正确声明依赖。

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