How to add 'Insert Widget' functionality to category WYSIWYG editors in Magento 2 ?

Question

Regarding Magento 2,

I want to add 'Insert Widget' button on category WYSIWYG editor. For more information please find attached screen shots.

1. cms_insert_widget.png -- I want functionality like this.

2. category_description_widget.png -- Where i want this functionality.

Answer 1

I finally managed to figure it out, after hours of coding around (I'm new to Magento 2)

All you need to do is a dependency injection on

\Magento\Catalog\Block\Adminhtml\Helper\Form\Wysiwyg\Content

Create a helper with the _prepareForm method, which we want to rewrite:

namespace [Vendor]\[Module]\Block\Adminhtml\Helper\Form\Wysiwyg;

use Magento\Backend\Block\Widget\Form\Generic;
use Magento\Catalog\Block\Adminhtml\Helper\Form\Wysiwyg\Content;

class ContentRewrite extends Content
{
    protected function _prepareForm()
    {
        /** @var \Magento\Framework\Data\Form $form */
        $form = $this->_formFactory->create(
            [
                'data' => ['id' => 'wysiwyg_edit_form', 'action' => $this->getData('action'), 'method' => 'post'],
            ]
        );

        $config['document_base_url'] = $this->getData('store_media_url');
        $config['store_id'] = $this->getData('store_id');
        $config['add_variables'] = true;
        $config['add_widgets'] = true;
        $config['add_directives'] = true;
        $config['use_container'] = true;
        $config['container_class'] = 'hor-scroll';

        $form->addField(
            $this->getData('editor_element_id'),
            'editor',
            [
                'name' => 'content',
                'style' => 'width:725px;height:460px',
                'required' => true,
                'force_load' => true,
                'config' => $this->_wysiwygConfig->getConfig($config)
            ]
        );
        $this->setForm($form);
        return Generic::_prepareForm();
    }
}

where we set $config['add_widgets'] and (if you also want to) $config['add_variables'] to true. Adjust the return statement and your done with your helper.

Create/Edit your di.xml and define a preference:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for='Magento\Catalog\Block\Adminhtml\Helper\Form\Wysiwyg\Content' type='[Vendor]\[Module]\Block\Adminhtml\Helper\Form\Wysiwyg\ContentRewrite'/>
</config>

I don't know if this ist the best and proper way to do it, but it actually works on CE 2.0.4.

And don't forget to add filter methods to your frontend output.

Answer 2

In case anyone is wondering how to do this in Magento 2.1.x (and probably 2.2+ as well). Here's how:

Create your own custom module and add view/adminhtml/ui_component/category_form.xml with (at least) the following code in it:

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <!--
        Add widget and variable buttons:
    -->
    <fieldset name="content">
        <field name="description">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="wysiwygConfigData" xsi:type="array">
                        <item name="settings" xsi:type="array">
                            <item name="theme_advanced_buttons1" xsi:type="string">magentovariable,magentowidget,|,bold,italic,|,justifyleft,justifycenter,justifyright,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code</item>
                        </item>
                        <item name="add_variables" xsi:type="boolean">true</item>
                        <item name="add_widgets" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

This will add the variable and widget buttons to the description-field when you're editing a category. But the widgets/variables need to be rendered as well on the frontend, otherwise you would just see the widget tags appear as text on the frontend (this was the question asked by anujeet).

To do this, add a plugin to your etc/di.xml (or etc/frontend/di.xml) with the following:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <!--
        Plugin to render widgets in category description:
    -->
    <type name="Magento\Catalog\Model\Template\Filter">
        <plugin name="render_widgets" type="Vendor\Module\Plugin\Magento\Catalog\Model\Template\Filter" />
    </type>
</config>

And in Vendor\Module\Plugin\Magento\Catalog\Model\Template\Filter.php put:

use Magento\Cms\Model\Template\FilterProvider;

/**
 * Class Filter
 */
class Filter
{
    /**
     * @var FilterProvider
     */
    protected $filterProvider;

    /**
     * Filter constructor.
     * @param FilterProvider $filterProvider
     */
    public function __construct(
        FilterProvider $filterProvider
    ) {
        $this->filterProvider = $filterProvider;
    }

    /**
     * @param \Magento\Catalog\Model\Template\Filter $subject
     * @param string $returnValue
     * @return string
     */
    public function afterFilter(\Magento\Catalog\Model\Template\Filter $subject, string $returnValue)
    {
        return $this->filterProvider
            ->getBlockFilter()
            ->filter($returnValue);
    }
}

That's it! Everything should work now.

Answer 3

I managed to this this by disabling the default description field and setting up my own wysiwyg field.

So in the category_form.xml I have:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="content">
        <field name="description">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="componentDisabled" xsi:type="boolean">true</item>
                </item>
            </argument>
        </field>
        <field name="description_new" template="ui/form/field" sortOrder="50" formElement="wysiwyg">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">category</item>
                </item>
            </argument>
            <settings>
                <label translate="true">Description</label>
                <dataScope>description</dataScope>
            </settings>
            <formElements>
                <wysiwyg>
                    <settings>
                        <wysiwyg>true</wysiwyg>
                    </settings>
                </wysiwyg>
            </formElements>
        </field>
    </fieldset>
</form>