Magento – Magento2: Category custom textarea with wysiwyg editor attribute value blank issue

categorycategory-attributemagento2

I have created two custom category attribute with wysiwyg editor and my attributes also shows in categories. But my issue is if i'm adding content in one attribute using wysiwyg editor then another custom attribute content going to blank.

For ex if i'm adding content in "Product Info Tab" attribute then "File Support Tab" attribute content going blank as attached image. Any help should be appriciated here. Thanks.

Here is my category_form.xml file:-

          <field name="cat_prodinfotab">            
            <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">Product Info Tab</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">cat_prodinfotab</item>
                    <item name="sortOrder" xsi:type="number">50</item>
                    <item name="rows" xsi:type="number">8</item>
                </item>
            </argument>
        </field>



        <field name="cat_filesuppotab">         
            <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">File Support Tab</item>
                    <item name="wysiwygConfigData" xsi:type="array">
                        <item name="settings" xsi:type="array">
                            <item name="theme_advanced_buttons5" xsi:type="string">bold,italic,|,justifyleft,justifycenter,justifyright,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code</item>
                            <item name="theme_advanced_buttons6" xsi:type="boolean">false</item>
                            <item name="theme_advanced_buttons7" xsi:type="boolean">false</item>
                            <item name="theme_advanced_buttons8" 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">cat_filesuppotab</item>
                    <item name="sortOrder" xsi:type="number">60</item>
                    <item name="rows" xsi:type="number">8</item>
                </item>
            </argument>
        </field>

Best Answer

As per your post i have followed the below steps and its working fine as expected please check the below steps once might be helpful.

Created module Inchoo_Attribute

Created InstallData.php in setup directory app/code/Inchoo/Attribute/Setup

<?php 
namespace Inchoo\Attribute\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,
        'cat_prodinfotab',
        [

            'type' => 'text',
            'label' => 'Product Infor Tab',
            'input' => 'textarea',
            'required' => false,
            'sort_order' => 333,
            'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
            'wysiwyg_enabled' => true,
            'is_html_allowed_on_front' => true,
            'group' => 'General Information' 

        ]
    );

    $eavSetup->addAttribute(
        \Magento\Catalog\Model\Category::ENTITY,
        'cat_filesuppotab',
        [
            'type' => 'text',
            'label' => 'File Supported Tab',
            'input' => 'textarea',
            'required' => false,
            'sort_order' => 334,
            'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
            'wysiwyg_enabled' => true,
            'is_html_allowed_on_front' => true,
            'group' => 'General Information' 
        ]
    );

   $setup->endSetup(); 
}
}

app/code/Inchoo/Attribute/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="cat_prodinfotab">
        <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">Product Info Tab</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">250px</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">cat_prodinfotab</item>
                <item name="sortOrder" xsi:type="number">50</item>
                <item name="rows" xsi:type="number">8</item>
            </item>
        </argument>
    </field>          

     <field name="cat_filesuppotab">
        <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">File Support Tab</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">250px</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">cat_filesuppotab</item>
                <item name="sortOrder" xsi:type="number">51</item>
                <item name="rows" xsi:type="number">8</item>
            </item>
        </argument>
    </field>       

</fieldset></form>

Executed module enabled commands and cleared flush cache and did Testing.

5 screen shot below

6 Database Tables Need to check:-

eav_attribute 
catalog_category_entity_text

https://drive.google.com/file/d/1FPDE3-_DMNelq_Wg7v67rvq8zHAWXxzg/view

Related Solutions

Magento – Add a wysiwyg editor in custom category attribute

The wysiwyg editor is available on the textarea type input. So if you are using the installer script to add your attribute for example use these options. Don't forget to append the other options you might need there like label.

$installer->addAttribute(Mage_Catalog_Model_Category::ENTITY, 'your_attribute', array(
   [...]
   'type' => 'text',
   'input' => 'textarea',
   'wysiwyg_enabled'   => true,
   [...]
));

Magento – How to create custom category attribute with wysiwyg editor in magento2

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.

Best Answer

Related Solutions

Magento – Add a wysiwyg editor in custom category attribute

Magento – How to create custom category attribute with wysiwyg editor in magento2

Related Topic