How to Add a Category Attribute with WYSIWYG editor in Magento 2

Magento 2 category entity provides a number of attributes by default. Still, we need a custom attribute sometimes to improve the functionality of category. Today we will see How to add a category attribute with WYSIWYG editor in Magento 2.

To add a custom attribute into the system first we need to create either an Install or an Upgrade Data script.

Create InstallData file

Create InstallData.php file under app/code/Vendor/Module/Setup directory and add below code.

<?php
namespace Codextblog\Categoryattr\Setup;

use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;

class InstallData implements InstallDataInterface
{

    private $eavSetupFactory;

    /**
     * Constructor
     *
     * @param \Magento\Eav\Setup\EavSetupFactory $eavSetupFactory
     */
    public function __construct(EavSetupFactory $eavSetupFactory)
    {
        $this->eavSetupFactory = $eavSetupFactory;
    }

    /**
     * {@inheritdoc}
     */
    public function install(
        ModuleDataSetupInterface $setup,
        ModuleContextInterface $context
    ) {
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);

        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Category::ENTITY,
            'promotion_text',
            [
                'type' => 'text',
                'label' => 'Promotion Text',
                'input' => 'textarea',
                'sort_order' => 333,
                'source' => '',
                'global' => 1,
                'visible' => true,
                'required' => false,
                'user_defined' => false,
                'default' => null,
                'wysiwyg_enabled' => true,
                'is_html_allowed_on_front' => true,
                'group' => 'General Information',
                'backend' => ''
            ]
        );
    }
}

In this file, we have added a promotion_text attribute into the system. Once you run this script it will create an attribute in the eav_attribute table.

Now we have to create ui_component of this attribute, which tells Magento to add this attribute into category form.

Create category_form ui component file

Create category_form.xml file under app/code/Vendor/Module/view/adminhtml/ui_component directory with below code.

<?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="general">
		<field name="promotion_text">
			<argument name="data" xsi:type="array">
				<item name="config" xsi:type="array">
					<item name="class" xsi:type="string">Magento\Catalog\Ui\Component\Category\Form\Element\Wysiwyg</item>
					<item name="formElement" xsi:type="string">wysiwyg</item>
					<item name="label" xsi:type="string" translate="true">Promotion Text</item>
					<item name="wysiwygConfigData" xsi:type="array">
						<item name="settings" xsi:type="array">
							<item name="theme_advanced_buttons1" xsi:type="string">bold,italic,|,justifyleft,justifycenter,justifyright,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code</item>
							<item name="theme_advanced_buttons2" xsi:type="boolean">false</item>
							<item name="theme_advanced_buttons3" xsi:type="boolean">false</item>
							<item name="theme_advanced_buttons4" xsi:type="boolean">false</item>
							<item name="theme_advanced_statusbar_location" xsi:type="boolean">false</item>
						</item>
						<item name="files_browser_window_url" xsi:type="boolean">false</item>
						<item name="height" xsi:type="string">100px</item>
						<item name="toggle_button" xsi:type="boolean">false</item>
						<item name="add_variables" xsi:type="boolean">false</item>
						<item name="add_widgets" xsi:type="boolean">false</item>
						<item name="add_images" xsi:type="boolean">false</item>
					</item>
					<item name="template" xsi:type="string">ui/form/field</item>
					<item name="source" xsi:type="string">category</item>
					<item name="wysiwyg" xsi:type="boolean">true</item>
					<item name="dataScope" xsi:type="string">promotion_text</item>
					<item name="sortOrder" xsi:type="number">33</item>
					<item name="rows" xsi:type="number">8</item>
				</item>
			</argument>
		</field>
	</fieldset>
</form>

After adding this code you should see the category attribute with WYSIWYG editor in category edit form.

Note: To display WYSIWYG editor, Please make sure WYSIWYG Options are enable from Magento 2 admin > Store > Configuration > General > Content Management section.

Hope this post helps you.To receive update about this type of code snippet, please like us on Facebook and follow us on Twitter.