Magento 2.1 thêm vấn đề loại thành phần mới


15

Tôi đã thêm một loại phần tử biểu mẫu mới được gọi Company\Module\Data\Form\Element\PdfButton, khi đó version EE 2.0.7và sử dụng phần tử này trong tab tùy chỉnh (được thêm bằng cách ghi đè Magento\Catalog\Block\Adminhtml\Product\Edit\Tabs) của trang quản trị chỉnh sửa sản phẩm.

Sau khi nâng cấp lên Magento EE 2.1, tab tùy chỉnh biến mất. Để làm cho nó xuất hiện, tôi đã thêm một công cụ sửa đổi để tạo một tab mới trong trang sản phẩm. Tôi đã thêm thành công một tab mới bằng cách sao chép công cụ sửa đổi trong tệp nhà cung cấp và đưa nó vào mô-đun của mình.

Nhưng, khi tôi muốn sử dụng yếu tố tùy chỉnh của mình. Vì vậy, trong trường con của mảng meta, tôi đã thêm đoạn mã sau:

$children[$website['id']] = [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'dataType' => Form\Element\DataType\Number::NAME,
                            'componentType' => Form\Field::NAME,
                            'formElement' => Form\Element\Wysiwyg2::NAME,
                            'description' => __($website['name']),
                            'tooltip' => $tooltip,
                            'sortOrder' => $sortOrder,
                            'dataScope' => 'website_ids.' . $website['id'],
                            'label' => "Pdf Upload",
                            'valueMap' => [
                                'true' => (string)$website['id'],
                                'false' => '0',
                            ],
                            'value' => $isChecked ? (string)$website['id'] : '0',
                        ],
                    ],
                ],
            ];

Sau đó, tôi đã sao chép Form\Element\Wysiwygvà dán nó vào Form\Element\Wysiwyg2. Trong lớp Wysiwyg2 :

<?php

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Magento\Ui\Component\Form\Element;

use Magento\Framework\Data\Form\Element\Editor;
use Magento\Framework\Data\Form;
use Magento\Framework\Data\FormFactory;
use Magento\Framework\DataObject;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Ui\Component\Wysiwyg\ConfigInterface;

/**
 * Class Input
 */
class Wysiwyg2 extends AbstractElement
{
    const NAME = 'wysiwyg2';

    /**
     * @var Form
     */
    protected $form;

    /**
     * @var Editor
     */
    protected $editor;

    /**
     * @param ContextInterface $context
     * @param FormFactory $formFactory
     * @param ConfigInterface $wysiwygConfig
     * @param array $components
     * @param array $data
     * @param array $config
     */
    public function __construct(
        ContextInterface $context,
        FormFactory $formFactory,
        ConfigInterface $wysiwygConfig,
        array $components = [],
        array $data = [],
        array $config = []
    ) {
        $wysiwygConfigData = isset($config['wysiwygConfigData']) ? $config['wysiwygConfigData'] : [];
        $this->form = $formFactory->create();
        $this->editor = $this->form->addField(
            $context->getNamespace() . '_' . $data['name'],
            'Magento\Framework\Data\Form\Element\Editor',
            [
                'force_load' => true,
                'rows' => 20,
                'name' => $data['name'],
                'config' => $wysiwygConfig->getConfig($wysiwygConfigData),
                'wysiwyg' => isset($config['wysiwyg']) ? $config['wysiwyg'] : null,
            ]
        );
        $data['config']['content'] = $this->editor->getElementHtml();

        parent::__construct($context, $components, $data);
    }

    /**
     * Get component name
     *
     * @return string
     */
    public function getComponentName()
    {
        return static::NAME;
    }}

Nhưng có một lỗi và tôi không biết nên thêm tên đó vào đâu.

1 exception(s):
Exception #0 (Magento\Framework\Exception\LocalizedException): The requested component ("wysiwyg2") is not found. Before using, you must add the implementation.

Exception #0 (Magento\Framework\Exception\LocalizedException): The requested component ("wysiwyg2") is not found. Before using, you must add the implementation.
#0 /var/www/vhosts/plchk/vendor/magento/module-ui/Model/Manager.php(207): Magento\Framework\View\Element\UiComponent\Config\Provider\Component\Definition->getComponentData('wysiwyg2')
#1 /var/www/vhosts/plchk/vendor/magento/framework/View/Element/UiComponentFactory.php(187): Magento\Ui\Model\Manager->createRawComponentData('wysiwyg2')
#2 /var/www/vhosts/plchk/vendor/magento/module-ui/Component/Form/Field.php(82): Magento\Framework\View\Element\UiComponentFactory->create(1, 'wysiwyg2', Array)
#3 /var/www/vhosts/plchk/vendor/magento/framework/View/Layout/Generator/UiComponent.php(148): Magento\Ui\Component\Form\Field->prepare()
#4 /var/www/vhosts/plchk/vendor/magento/framework/View/Layout/Generator/UiComponent.php(145): Magento\Framework\View\Layout\Generator\UiComponent->prepareComponent(Object(Magento\Ui\Component\Form\Field))

Câu trả lời:


0

Theo hiểu biết của tôi, bạn đang cố gắng thêm toàn bộ loại thành phần Ui mới gọi wysiwyg2.

Nhưng thật không may, có một vấn đề đã biết về việc thêm loại Thành phần Ui mới (vâng, chỉ là một loại khác). Bạn có thể kiểm tra vấn đề ban đầu overhere .

Hãy xem xét sâu hơn về cách Magento 2 xử lý các thành phần Ui ở dạng sản phẩm.

nhà cung cấp / magento / mô-đun danh mục / Ui / DataProvider / Sản phẩm / Biểu mẫu / Công cụ sửa đổi / Eav.php

/**
 * Add wysiwyg properties
 *
 * @param ProductAttributeInterface $attribute
 * @param array $meta
 * @return array
 */
private function customizeWysiwyg(ProductAttributeInterface $attribute, array $meta)
{
    if (!$attribute->getIsWysiwygEnabled()) {
        return $meta;
    }

    $meta['arguments']['data']['config']['formElement'] = WysiwygElement::NAME;
    $meta['arguments']['data']['config']['wysiwyg'] = true;
    $meta['arguments']['data']['config']['wysiwygConfigData'] = [
        'add_variables' => false,
        'add_widgets' => false,
        'add_directives' => true,
        'use_container' => true,
        'container_class' => 'hor-scroll',
    ];

    return $meta;
}

Và bên trong public function setupAttributeMeta(ProductAttributeInterface $attribute, $groupCode, $sortOrder)

Dòng 633 (có thể khác nhau cho mỗi phiên bản)

        case 'textarea':
            $meta = $this->customizeWysiwyg($attribute, $meta);
            break;

Như bạn có thể thấy, customizeWysiwyg()mã hóa cứng formElementđể wysiwyg.

Nếu bạn muốn wysiwyg2làm việc, bạn cần viết một plugin setupAttributeMeta()để thêm một cái gì đó như$meta = $this->customizeWysiwyg2($attribute, $meta);

Nhưng tôi không khuyến khích điều này, bạn chỉ có thể tạo một sở thích cho \Magento\Ui\Component\Form\Element\Wysiwyg, sau đó bên trong hàm tạo bạn có thể làm một cái gì đó như

/**
 * Wysiwyg constructor.
 *
 * @param \Magento\Framework\View\Element\UiComponent\ContextInterface $context
 * @param \Magento\Framework\Data\FormFactory                          $formFactory
 * @param \Magento\Ui\Component\Wysiwyg\ConfigInterface                $wysiwygConfig
 * @param array                                                        $components
 * @param array                                                        $data
 * @param array                                                        $config
 */
public function __construct(
    ContextInterface $context,
    FormFactory $formFactory,
    ConfigInterface $wysiwygConfig,
    array $components = [],
    array $data = [],
    array $config = []
) {
    // Override the component for the WYSIWYG
    // This is not done using definition.xml due to https://github.com/magento/magento2/issues/5647
    $data['config']['component'] = 'Stackoverflow_Toan/js/form/element/wysiwyg';

    // Override the templates to include our KnockoutJS code
    $data['config']['template'] = 'Stackoverflow_Toan/wysiwyg';
    $data['config']['elementTmpl'] = 'Stackoverflow_Toan/wysiwyg';

    parent::__construct($context, $formFactory, $wysiwygConfig, $components, $data, $config);
}

Bằng cách này, bạn có thể có các mẫu jsComponent, loại trực tiếp của mình ..etc và sẵn sàng tùy chỉnh theo bất cứ điều gì bạn muốn.

Hi vọng điêu nay co ich :)

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.