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 '18 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 '18 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 '18 at 6:12
4

Please follow 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 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 you 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 you 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 '20 at 9:32
  • 1
    How to get this value on frontend? Nov 2 '20 at 6:07
  • 1
    How show this attribute value on frontend Nov 2 '20 at 6:32
1

If the editor is not showing after following advice above, make sure you have installed the attribute with is_wysiwyg_enabled => true, else is wont 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, privacy policy and cookie policy

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