1

Hi i want to add custom category attribute with wysiwyg enable editor i get the code of custom category attribute but not able to find with wysiwyg editor.if anyone is there help me please.

3
  • Did you enabled attribute wysiwyg value. Please check URL inchoo.net/magento-2/add-category-attribute-magento-2
    – Nits
    May 24, 2018 at 5:44
  • yes i enabled but its not working..and i also follow all steps of inchoo which link you gave me. May 24, 2018 at 6:03
  • 1
    Okay Can you please check added attribute in your db catalog_eav_attribute table is_wysiwyg_enabled and is_html_allowed_on_front, it should be 1
    – Nits
    May 24, 2018 at 6:12

2 Answers 2

6

Please follow the below steps to create a custom Category attribute and add it as WYSIWYG Editor in Category form.

Step 1: Create custom attribute through Install or Upgrade Script.

Below is an example of an install script.

Namespace/Modulename/Setup/InstallData.php

<?php
namespace Vendor\Namespace\Setup;

use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Catalog\Setup\CategorySetupFactory;
use Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface;

class InstallData implements InstallDataInterface
{

    public function __construct( CategorySetupFactory $categorySetupFactory )
    {
        $this->categorySetupFactory = $categorySetupFactory;
    }
    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {

        $setup->startSetup();

        $categorySetup = $this->categorySetupFactory->create(['setup' => $setup]);

        $categorySetup->addAttribute(
            \Magento\Catalog\Model\Category::ENTITY, 'category_custom_editor', [
                'type' => 'text',
                'label' => 'Custom Editor',
                'input' => 'textarea',
                'backend' => 'Magento\Eav\Model\Entity\Attribute\Backend\ArrayBackend',
                'wysiwyg_enabled' => true,
                'is_html_allowed_on_front' => true,
                'required' => false,
                'sort_order' => 10,
                'global' => ScopedAttributeInterface::SCOPE_STORE
            ]
        );

         $setup->endSetup();

     }
 }

Run php bin/magento setup:upgrade console command to upgrade your data. Now your custom attribute will be created.

Step 2: Add the Custom attribute in Category Form with WYSIWYG Editor

Namespace/ModuleName/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="category_custom_editor" template="ui/form/field" sortOrder="10" formElement="wysiwyg">
            <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">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="height" xsi:type="string">10px</item>
                        <item name="toggle_button" xsi:type="boolean">false</item>
                        <item name="add_variables" xsi:type="boolean">true</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>
                <scopeLabel>[STORE VIEW]</scopeLabel>
                <label translate="true">Custom Editor</label>
                <dataScope>category_custom_editor</dataScope>
            </settings>
            <formElements>
                <wysiwyg class="Magento\Catalog\Ui\Component\Category\Form\Element\Wysiwyg">
                    <settings>
                        <rows>4</rows>
                        <wysiwyg>true</wysiwyg>
                    </settings>
                </wysiwyg>
            </formElements>
        </field>
    </fieldset>
</form>

Clear the cache if you have enabled it. Now you can see your custom editor attribute in Admin Category edit form.

3
  • Not showing in admin area but it's in the eav_attribute table any help Aug 6, 2020 at 9:32
  • 1
    How to get this value on frontend? Nov 2, 2020 at 6:07
  • 1
    How show this attribute value on frontend Nov 2, 2020 at 6:32
2

If the editor is not showing after the following advice above, make sure you have installed the attribute with is_wysiwyg_enabled => true, else it won't show (tested in 2.4.1)

Example:

<?php

    namespace Vendor\Module\Setup;

    use Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface;
    use Magento\Eav\Setup\EavSetupFactory;
    use Magento\Framework\Setup\InstallDataInterface;
    use Magento\Framework\Setup\ModuleContextInterface;
    use Magento\Framework\Setup\ModuleDataSetupInterface;

    class InstallData implements InstallDataInterface
    {
        private $eavSetupFactory;

        public function __construct(EavSetupFactory $eavSetupFactory)
        {
            $this->eavSetupFactory = $eavSetupFactory;
        }

        public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
        {
            if (version_compare($context->getVersion(), '0.1.0') < 0) {
                $setup->startSetup();
                $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
               
                $eavSetup->addAttribute(
                    Category::ENTITY,
                    'description_bottom',
                    [
                        'type'                      => 'text',
                        'label'                     => 'Description Bottom',
                        'input'                     => 'textarea',
                        'required'                  => false,
                        'sort_order'                => 120,
                        'global'                    => ScopedAttributeInterface::SCOPE_STORE,
                        'is_wysiwyg_enabled'        => true,
                        'is_html_allowed_on_front'  => true,
                        'group'                     => 'General Information',
                    ]
                );
                $setup->endSetup();
            }
        }
    }

This is working 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="description_bottom">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">150</item>
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="formElement" xsi:type="string">wysiwyg</item>
                    <item name="label" xsi:type="string" translate="true">Description Bottom</item>
                    <item name="notice" xsi:type="string" translate="true"></item>
                    <item name="additionalClasses" xsi:type="string"></item>
                    <item name="class" xsi:type="string">Magento\Catalog\Ui\Component\Category\Form\Element\Wysiwyg</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">true</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="rows" xsi:type="number">8</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.