在 Typo3 后端模块中使用 link 向导

Using the link wizard in a Typo3 backend module

我正在为这个而烦恼。

我使用 Extension Builder 创建了一个 T3-Extension - 后端模块。 现在我想为用户提供 link-向导,因此 she/he 可以 select 来自 T3-Tree 的内部 link。

我为此创建了一个 TCA 条目:

'url' => [
        'label' => 'Link',
        'exclude' => 1,
        'config' => [
            'type'  => 'input',
            'size'  => '50',
            'max'   => '256',
            'eval'  => 'trim',
            'renderType' => 'inputLink',
            'fieldControl' => [
                'linkPopup' => [
                    'options' => [
                        'blinkLinkOptions' => 'mail,page,spec,url,folder',
                        'blindLinkFields' => 'class,params,target,title',
                        'allowedExtensions' => 'html,php'
                    ],
                ],
            ],
            'fieldWizard' => [
                'localizationStateSelector' => [
                    'disabled' => false,
                ]
            ]
        ],
    ],

在流体模板(视图)中我只是使用这个:

<f:form.textfield property="url" />

根据文档,TCA-config 应该在输入字段后添加一个按钮。

但事实并非如此。

我是做错了什么还是这根本不起作用?

我也尝试在我的模板中使用 flux(它有一个 link-browser view helper),但是当我使用 <flux:...> 时,表单中没有任何内容呈现。

使用 Typo3 8.7

我终于找到了解决办法。

这是我扩展的控制器

$options = [
        'renderType' => 'inputLink',
        'tableName' => 'myTable',
        'fieldName' => 'url',
        'databaseRow' => [
            'uid' => $myModel->getUid(),
            'pid' => 0
        ],
        'parameterArray' => [
            'fieldConf' => [
                'label' => 'URL',
                'config' => [
                    'eval' => 'trim',
                    'size' => 1024,
                ],
            ],
            'itemFormElValue' => $myModel->getUrl(),
            'itemFormElName' => 'data[myTable][editform][url]',
            'itemFormElID' => 'data[mytable][editform][url]',
            'field' => 'url',
            'fieldChangeFunc' => [
                'TBE_EDITOR_fieldChanged' => "TBE_EDITOR.fieldChanged('mytable','editform','url','data[mytable][editform][url]');"
                ],

        ]
    ];

        $nodeFactory = new NodeFactory();
        $linkField = new InputLinkElement($nodeFactory, $options);
        $urlField = $linkField->render();

        $this->view->assign('renderedUrlField', $urlField['html']);

其中 «mytable» 是控制器使用的 table,«editform» 是表单名称,而 «url» 是用于存储值。

出于某种原因,您需要将表单命名为 «editform»,因为 sysext-JS 引用了它。

您需要将其添加到您的控制器中才能使其正常工作:

use TYPO3\CMS\Backend\Form\Element\InputLinkElement;
use TYPO3\CMS\Backend\Form\NodeFactory;

并且在流体模板中,您必须使用:

<f:format.raw>{renderedUrlField}</f:format.raw>

因为它 returns html-code.

现在初始化 FormEngine

将此添加到 <f:be.container...> 部分的 Default.html:

includeJsFiles="{
        1:'/typo3/sysext/backend/Resources/Public/JavaScript/jsfunc.tbe_editor.js',
3:'/typo3/sysext/backend/Resources/Public/JavaScript/jsfunc.inline.js',
        4:'/typo3/sysext/backend/Resources/Public/JavaScript/backend.js'
    }"

            includeRequireJsModules="{
        0:'{f:uri.resource(path:\'JavaScript/ckeditor/ckeditor.js\')}',
        4:'TYPO3/CMS/Backend/FormEngine',
        5:'TYPO3/CMS/Backend/FormEngineValidation',
        7:'TYPO3/CMS/Backend/ContextMenu',
        8:'TYPO3/CMS/Backend/FormEngineReview',
        9:'{f:uri.resource(path:\'JavaScript/main.js\')}'
      }"

我在这里也包含了 ckeditor。

现在,您需要初始化 FormEngine。我在 main.js:

中这样做了
TYPO3.settings.FormEngine = {"formName":"editform"};

define(['jquery', 'TYPO3/CMS/Backend/FormEngine'], function($){
    'use strict';

    $(function(){
        TYPO3.FormEngine.initialize();
    });
});

第一行很重要,否则JS会报错

希望这对某人有所帮助。

如果您想使用 Fluid 创建 link 向导,我的回答将无济于事,但它回答了部分问题并添加了其他信息。

通过 TCA 为字段设置 link 向导不会神奇地使 link 向导出现在 Fluid 中。但是,如果您直接在后端编辑记录(使用列表视图),它将使 link 向导可用。

示例:您使用字段 url 创建 table tx_myext_domain_model_mydata,将 TCA 设置为使用 link 向导。然后使用列表视图创建和编辑记录。

您可以在扩展 styleguide 中查看带有 link 向导的记录示例。使用此扩展很好,因为它是各种后端功能的半官方演示。例如,扩展名 "news" 也使用编辑新闻记录 (tx_news_domain_model_news.internalurl)。

安装 "styleguide" 扩展,创建示例记录,select "elements basic" 并查看示例 "input_29 link"(对于 TYPO3 8)。参见 source code and TCA Reference renderType inputLink