TYPO3:如何在自己的后端模块中使用元素浏览器?

时间:2018-02-24 12:29:50

标签: javascript module typo3 backend

我想在自己的TYPO3 8.7后端模块中有一个简单的输入字段,在元素浏览器中单击页面后应该用pageid填充。

我过去尝试了很多,但主要问题是点击包含Error - reference to main window is not set properly!

的网页时元素浏览器出现错误警告

我的module.js文件目前看起来像是:

var setFormValueOpenBrowser;

define(['jquery', 'TYPO3/CMS/Lux/Vendor/Chart.min'], function($) {

	// define(['jquery', 'TYPO3/CMS/Lux/Vendor/Chart.min', 'TYPO3/CMS/Backend/FormEngine'], function($) {

	// main options
	// var FormEngine = {
	// 	formName: TYPO3.settings.FormEngine.formName
	// 	,backPath: TYPO3.settings.FormEngine.backPath
	// 	,openedPopupWindow: null
	// 	,legacyFieldChangedCb: function() { !$.isFunction(TYPO3.settings.FormEngine.legacyFieldChangedCb) || TYPO3.settings.FormEngine.legacyFieldChangedCb(); }
	// };

	var url = '/typo3/index.php?route=%2Fwizard%2Frecord%2Fbrowse&token=53b5d23e8e661e465636a96ca618426cb293d0b5&mode=db&bparams=data[pages][2][content_from_pid]|||pages|';
	var popup = window.open(url, 'Typo3WinBrowser', 'height=600,width=800,status=0,menubar=0,resizable=1,scrollbars=1');
	popup.focus();

});

当然,在这个例子中,令牌是硬编码的 - 但这不是问题。 顺便说一句:如果我尝试通过require.js加载FormEngine,控制台会抛出TypeError: TYPO3.settings.FormEngine is undefined

是否有人在自己的后端模块中使用元素浏览器(文件或页面)的工作代码?或者是否有现有的扩展,我可以深入研究代码?

1 个答案:

答案 0 :(得分:3)

尽管这个问题有点过时,但是我是这样做的:

这是在我的扩展程序的控制器中

$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”是控制器使用的表,“ 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>

因为它返回html代码。

关于javascript错误:这是因为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将抛出该错误。

希望这对某人有帮助。