BlissfullyChaotic
BlissfullyChaotic

Reputation: 1

Magento 2 Adding Wysiwyg to Custom Tab in Catalog_Product_New

I have successfully added a custom tab in the product admin page, and can save it in the database and display it on the frontend, however I am wanting to add a Wysiwyg editor for the body content and I can't seem to get it to display properly

Here are code examples so you can better understand my problem:

Inside my di.xml

 <?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool">
        <arguments>
            <argument name="modifiers" xsi:type="array">
                <item name="custom-fieldset" xsi:type="array">
                    <item name="class" xsi:type="string">JP\AskedFreq\Ui\DataProvider\Product\Form\Modifier\CustomFieldset</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                </item>
            </argument>
        </arguments>
    </virtualType>
</config>

Inside DataProvider/Product/Form/Modifier/CustomFieldset.php

<?php
namespace JP\AskedFreq\Ui\DataProvider\Product\Form\Modifier;

use Magento\Catalog\Model\Locator\LocatorInterface;
use Magento\Catalog\Ui\Component\Category\Form\Element\Wysiwyg;

use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier; use Magento\Framework\Exception\InputException; use Magento\Framework\Stdlib\ArrayManager; use Magento\Framework\UrlInterface; use Magento\Ui\Component\Container; use Magento\Ui\Component\Form\Fieldset; use Magento\Ui\Component\Form\Element\DataType\Number; use Magento\Ui\Component\Form\Element\DataType\Text; use Magento\Ui\Component\Form\Element\Input; use Magento\Ui\Component\Form\Element\Textarea; use Magento\Ui\Component\Form\Element\Select; use Magento\Ui\Component\Form\Field;

class CustomFieldset extends AbstractModifier
{


/**
 * @var \Magento\Catalog\Model\Locator\LocatorInterface
 */
protected $locator;

/**
 * @var ArrayManager
 */
protected $arrayManager;

/**
 * @var UrlInterface
 */
protected $urlBuilder;

/**
 * @var array
 */
protected $meta = [];

protected $editor;


/**
 * @param LocatorInterface $locator
 * @param ArrayManager $arrayManager
 * @param UrlInterface $urlBuilder
 */
public function __construct(
    LocatorInterface $locator,
    ArrayManager $arrayManager,
    UrlInterface $urlBuilder


)
{
    $this->locator = $locator;
    $this->arrayManager = $arrayManager;
    $this->urlBuilder = $urlBuilder;

}

/**
 * Data modifier, does nothing in our example.
 *
 * @param array $data
 * @return array
 */
public function modifyData(array $data)
{
    return $data;
}

/**
 * Meta-data modifier: adds ours fieldset
 *
 * @param array $meta
 * @return array
 */
public function modifyMeta(array $meta)
{
    $this->meta = $meta;
    $this->addCustomFieldset();

    return $this->meta;
}

/**
 * Merge existing meta-data with our meta-data (do not overwrite it!)
 *
 * @return void
 */
protected function addCustomFieldset()
{
    $this->meta = array_merge_recursive(
        $this->meta,
        [
            static::CUSTOM_FIELDSET_INDEX => $this->getFieldsetConfig(),
        ]
    );
}

/**
 * Declare ours fieldset config
 *
 * @return array
 */
protected function getFieldsetConfig()
{
    return [
        'arguments' => [
            'data' => [
                'config' => [
                    'label' => __('Frequently Asked Questions'),
                    'componentType' => Fieldset::NAME,
                    'dataScope' => static::DATA_SCOPE_PRODUCT, // save data in the product data
                    'provider' => static::DATA_SCOPE_PRODUCT . '_data_source',
                    'ns' => static::FORM_NAME,
                    'collapsible' => true,
                    'sortOrder' => 10,
                    'opened' => true,
                ],
            ],
        ],
        'children' => [
            static::CONTAINER_HEADER_NAME => $this->getHeaderContainerConfig(10),
            static::FIELD_NAME_BODY => $this->getTextAreaFieldConfig(40),
        ],
    ];
}

/**
 * Get config for header container
 *
 * @param int $sortOrder
 * @return array
 */
protected function getHeaderContainerConfig($sortOrder)
{
    return [
        'arguments' => [
            'data' => [
                'config' => [
                    'label' => null,
                    'formElement' => Container::NAME,
                    'componentType' => Container::NAME,
                    'template' => 'ui/form/components/complex',
                    'sortOrder' => $sortOrder,
                    'content' => __('Frequently Asked Questions'),
                ],
            ],
        ],
        'children' => [],
    ];
}


protected function getTextAreaFieldConfig($sortOrder)
{
    return [
        'arguments' => [
            'data' => [
                'config' => [
                    'label' => __('Body'),
                    'componentType' => Wysiwyg::NAME,
                    'formElement' => Wysiwyg::NAME,
                    'dataScope' => static::FIELD_NAME_BODY,
                    'dataType' => Text::NAME,
                    'sortOrder' => $sortOrder,
                    'options' => $this->_getOptions(),
                    'visible' => true,
                    'disabled' => false,
                    'wysiwyg_enabled' => true
                ],
            ],
        ],
    ];
}

}

Inside the getTextAreaFieldConfig function I am trying to call the Wyiwyg form element but it does not appear.

Any advice on how I can do this?

Upvotes: 0

Views: 1263

Answers (0)

Related Questions