How to enable wysiwyg editor for custom attribute in admin category page?

Question

I have created a custom category attribute using below code.

Ayakil\CustomCategoryAttribute\Setup\Patch\Data\AddMyDescriptionCategoryAttribute.php

public function apply()
{
 $this->moduleDataSetup->getConnection()->startSetup();
 /** @var EavSetup $eavSetup */
 $eavSetup = $this->eavSetupFactory->create(['setup' => $this->moduleDataSetup]);
 $eavSetup->addAttribute(
 \Magento\Catalog\Model\Category::ENTITY,
 'my_description',
 [
 'type' => 'text',
 'label' => 'my_description',
 'input' => 'textarea',
 'sort_order' => 444,
 'source' => '',
 'global' => ScopedAttributeInterface::SCOPE_WEBSITE,
 'visible' => true,
 'required' => false,
 'user_defined' => false,
 'default' => null,
 'group' => 'General Information',
 'backend' => '',
 'wysiwyg_enabled' => true,
 'is_wysiwyg_enabled' => true,
 'is_html_allowed_on_front' => true,
 ]
 );
 $this->moduleDataSetup->getConnection()->endSetup();
}

Ayakil\CustomCategoryAttribute\view\admin_html\ui_component\category_form.xml

<field name="my_description" template="ui/form/field" sortOrder="150" formElement="wysiwyg">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="wysiwygConfigData" xsi:type="array">
 <item name="height" xsi:type="string">100px</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">true</item>
 <item name="add_directives" xsi:type="boolean">true</item>
 </item>
 <item name="source" xsi:type="string">category</item>
 </item>
 </argument>
 <settings>
 <label translate="true">My Description</label>
 <notice translate="true">Note: Keyboard shortcut to activate editor help : Alt + 0 (Windows) or &#x2325;0 (MacOS)</notice>
 <dataScope>my_description</dataScope>
 </settings>
 <formElements>
 <wysiwyg class="Magento\Catalog\Ui\Component\Category\Form\Element\Wysiwyg">
 <settings>
 <rows>8</rows>
 <wysiwyg>true</wysiwyg>
 </settings>
 </wysiwyg>
 </formElements>
 </field>

This will add the My description field in category as below enter image description here

But when i go to the Schedule Changes and clic Schedule New Update Button i'm not getting the wysiwyg editor there. enter image description here

Can anyone please tell me what i am missing here.

• mohit vamja: I will edit your code and get the final solution you need. so please check it.

Answer 1

You need to add a similar way in the content staging form. You can see the layout here vendor/magento/module-catalog-staging/view/adminhtml/ui_component/catalogstaging_category_update_form.xml

Follow the default description settings in this xml like:

<field name="description" template="ui/form/field" sortOrder="50" formElement="wysiwyg">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="wysiwygConfigData" xsi:type="array">
 <item name="height" xsi:type="string">100px</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">true</item>
 <item name="add_directives" xsi:type="boolean">true</item>
 </item>
 <item name="source" xsi:type="string">category</item>
 </item>
 </argument>
 <settings>
 <label translate="true">Description</label>
 <dataScope>description</dataScope>
 </settings>
 <formElements>
 <wysiwyg class="Magento\Catalog\Ui\Component\Category\Form\Element\Wysiwyg">
 <settings>
 <rows>8</rows>
 <wysiwyg>true</wysiwyg>
 </settings>
 </wysiwyg>
 </formElements>
</field>

So create file (view/adminhtml/ui_component/catalogstaging_category_update_form.xml) inside your module and add your custom attribute config.

• Mujahidh: Thank you, Its worked like charm,

Answer 2

Hello dear I will add your code my project when I get the final solution. i will change my code. you can read and follow all the steps.

Go directory to app/code/Test/Uiform\Setup\Patch\Data\AddMyDescriptionCategoryAttribute

declare(strict_types=1);
namespace Test\Uiform\Setup\Patch\Data;
use Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface;
use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\Patch\DataPatchInterface;
use Magento\Framework\Setup\Patch\PatchRevertableInterface;
class AddMyDescriptionCategoryAttribute implements DataPatchInterface, PatchRevertableInterface
{
/**
 * @var ModuleDataSetupInterface
 */
private $moduleDataSetup;
/**
 * @var EavSetupFactory
 */
private $eavSetupFactory;
/**
 * Constructor
 *
 * @param ModuleDataSetupInterface $moduleDataSetup
 * @param EavSetupFactory $eavSetupFactory
 */
public function __construct(
 ModuleDataSetupInterface $moduleDataSetup,
 EavSetupFactory $eavSetupFactory
) {
 $this->moduleDataSetup = $moduleDataSetup;
 $this->eavSetupFactory = $eavSetupFactory;
}
/**
 * {@inheritdoc}
 */
public function apply()
{
 $this->moduleDataSetup->getConnection()->startSetup();
 /** @var EavSetup $eavSetup */
 $eavSetup = $this->eavSetupFactory->create(['setup' => $this->moduleDataSetup]);
 $eavSetup->addAttribute(
 \Magento\Catalog\Model\Category::ENTITY,
 'my_description',
 [
 'type' => 'text',
 'label' => 'my_description',
 'input' => 'textarea',
 'sort_order' => 333,
 'source' => '',
 'global' => ScopedAttributeInterface::SCOPE_STORE,
 'visible' => true,
 'required' => false,
 'user_defined' => false,
 'default' => null,
 'group' => 'General Information',
 'backend' => ''
 ]
 );
 $this->moduleDataSetup->getConnection()->endSetup();
}
public function revert()
{
 $this->moduleDataSetup->getConnection()->startSetup();
 /** @var EavSetup $eavSetup */
 $eavSetup = $this->eavSetupFactory->create(['setup' => $this->moduleDataSetup]);
 $eavSetup->removeAttribute(\Magento\Catalog\Model\Category::ENTITY, 'my_description');
 $this->moduleDataSetup->getConnection()->endSetup();
}
/**
 * {@inheritdoc}
 */
public function getAliases()
{
 return [];
}
/**
 * {@inheritdoc}
 */
public static function getDependencies()
{
 return [
 
 ];
}
 }

after go to /var/www/html/project/app/code/Test/Uiform/view/adminhtml/ui_component/category_form.xml

<?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="my_description" template="ui/form/field" sortOrder="50" formElement="wysiwyg">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="wysiwygConfigData" xsi:type="array">
 <item name="height" xsi:type="string">100px</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">true</item>
 <item name="add_directives" xsi:type="boolean">true</item>
 <item name="is_pagebuilder_enabled" xsi:type="boolean">false</item>
 </item>
 <item name="source" xsi:type="string">category</item>
 </item>
 </argument>
 <settings>
 <label translate="true">My Description</label>
 <notice translate="true">Note: Keyboard shortcut to activate editor help : Alt + 0 (Windows) or &#x2325;0 (MacOS)</notice>
 <dataScope>my_description</dataScope>
 </settings>
 <formElements>
 <wysiwyg class="Magento\Catalog\Ui\Component\Category\Form\Element\Wysiwyg">
 <settings>
 <rows>8</rows>
 <wysiwyg>true</wysiwyg>
 </settings>
 </wysiwyg>
 </formElements>
 </field>
</fieldset>
</form>

after apply below commands

sudo php bin/magento s:up && sudo php bin/magento setup:di:compile && sudo php bin/magento s:static-content:de -f && sudo php bin/magento c:f && sudo chmod -R 777 var/ pub/ generated

Please check my below screen shot.

enter image description here enter image description here

I hope that you understand solved this issue. after my code implementation solved the issue then accept my answer and upvote.

• Mujahidh: Thanks, My version is EE, there is a schedule update part and my issue was that wyswyg editor is not appearing there.

Answer 3

<field name="my_description" template="ui/form/field" sortOrder="150" formElement="wysiwyg">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="wysiwygConfigData" xsi:type="array">
 <item name="is_pagebuilder_enabled" xsi:type="boolean">false</item>
 <item name="height" xsi:type="string">100px</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">true</item>
 <item name="add_directives" xsi:type="boolean">true</item>
 </item>
 <item name="source" xsi:type="string">category</item>
 </item>
 </argument>
 <settings>
 <label translate="true">My Description</label>
 <notice translate="true">Note: Keyboard shortcut to activate editor help : Alt + 0 (Windows) or &#x2325;0 (MacOS)</notice>
 <dataScope>my_description</dataScope>
 </settings>
 <formElements>
 <wysiwyg class="Magento\Catalog\Ui\Component\Category\Form\Element\Wysiwyg">
 <settings>
 <rows>8</rows>
 <wysiwyg>true</wysiwyg>
 </settings>
 </wysiwyg>
 </formElements>
</field>

Here dear you can try this.

• Mujahidh: Thanks for attempting to answer my question, Your answer not giving any information to fix my issue
• mohit vamja: i will share my latest code with implementation my project so please check this.