heimrichhannot/contao-multi-column-editor-bundle

此模块提供了一种输入类型,用于在前端和后端编辑一个或多个记录。


README

此模块提供了一种输入类型,用于在后台和前端编辑一个或多个记录。

alt text

特性

  • 编辑单个或多个记录的输入类型
  • 支持后台和前端
  • Encore bundle 支持

安装

使用 composer 安装

composer require heimrichhannot/contao-multi-column-editor-bundle

技术说明

使用 "multiColumnEditor" 输入类型为您字段。

最小示例

$GLOBALS['TL_DCA']['tl_my_table']['fields']['mce_field'] = [
    'inputType' => 'multiColumnEditor',
    'eval'      => [
        'multiColumnEditor' => [
            'fields' => [
                'field1' => [
                    'label' => &$GLOBALS['TL_LANG']['tl_my_table']['field1'],
                    'inputType' => 'text',
                    'eval' => ['groupStyle' => 'width:150px']
                ],
                'field2' => [
                    'label' => &$GLOBALS['TL_LANG']['tl_my_table']['field2'],
                    'inputType'               => 'select',
                    'options'                 => ['option1', 'option2'],
                    'eval' => ['groupStyle' => 'width:150px']
                ],
            ]
        ]
    ],
    'sql'       => "blob NULL"
];

所有可用选项

'someField' => [
    'label'     => &$GLOBALS['TL_LANG']['tl_my_table']['someField'],
    'inputType' => 'multiColumnEditor',
    'exclude'   => true,
    // add 'compact' to tl_class if you want to display a reduced version of MCE
    'tl_class'  => 'compact', 
    'eval'      => [
        'multiColumnEditor' => [
            // set to true if the rows should be sortable (backend only atm)
            'sortable' => true,
            'class' => 'some-class',
            // set to 0 if it should also be possible to have *no* row (default: 1)
            'minRowCount' => 2,
            // set to 0 if an infinite number of rows should be possible (default: 0)
            'maxRowCount' => 5,
            // defaults to false
            'skipCopyValuesOnAdd' => false,
            'editorTemplate' => 'multi_column_editor_backend_default',
            // Optional: add palette and subpalette if you need supalettes support (otherwise all fields will be shows)
            // Legends are supported since verison 2.8
            'palettes'    => [
                '__selector__' => ['field1'],
                'default'      => 'field1',
            ],
            'subpalettes' => [
                'field1'  => 'field2', // key selector
                'field1_10' => 'field3' // key_value selector
            ],
            // place your fields here as you would normally in your DCA
            // (sql is not required)
            'fields' => [
                
                'field1' => [
                    'label' => ['field 1', 'The description of field 1'],
                    'inputType' => 'text',
                    'eval' => ['groupStyle' => 'width:150px', 'submitOnChange' => true]
                ],
                'field2' => [
                    'label' => ['field 2', 'The description of field 2'],
                    'inputType' => 'text',
                    'eval' => ['groupStyle' => 'width:150px']
                ],
                'field3' => [
                    'label' => ['field 3', 'The description of field 3'],
                    'inputType' => 'text',
                    'eval' => ['groupStyle' => 'width:150px']
                ]
            ]
        ]
    ],
    'sql'       => "blob NULL"
],

在 Rocksolid Custom Content Elements (RSCE) 中添加对特殊字段(如文件树)的支持

只需将以下内容添加到项目的 config.php

$GLOBALS['MULTI_COLUMN_EDITOR']['rsce_fields'] = array_merge(
    is_array($GLOBALS['MULTI_COLUMN_EDITOR']['rsce_fields']) ? $GLOBALS['MULTI_COLUMN_EDITOR']['rsce_fields'] : [], [
        'tl_content' => ['linkImage']
    ]
);

这里将是您的 RSCE 配置

$element = [
     // ...
    'fields'          => [
        'links'              => [
            'label'     => &$GLOBALS['TL_LANG']['tl_content']['links'],
            'inputType' => 'multiColumnEditor',
            'eval'      => [
                'tl_class'          => 'long clr',
                'multiColumnEditor' => [
                    'minRowCount' => 0,
                    'fields'      => [
                        'linkImage'     => [
                            // ...
                            'inputType'               => 'fileTree',
                        ],
    // ...

开发者

资产

Bundle 资产以 yarn package 的形式提供。源代码和 JavaScript 文档可以在 src/Resources/npm-package 中找到。