Add Wysiwyg attribute to Product in Magento 2

Question

How to create Magento 2 Product Attribute with Wysiwyg editor Programmatically.

Answer 1

Latest Magento version 2.3 provides the "Text Editor" Catalog Input Type for Store Owner So please go to Store->Attributes->Product and add the New product attribute with the Catalog Input Type "Text Editor".

I hope this is helpful to you!!

Answer 2

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

Step 1 : Create custom attribute through Install Script.

Below is an example of install script.

VendoreName/ModuleName/Setup

InstallData.php

<?php

namespace VendoreName\ModuleName\Setup;

use Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface;
use Magento\Eav\Model\Entity\Attribute\Source\Boolean;
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)
    {
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Product::ENTITY,
            'editor_content',
            [
                'type' => 'text',
                'backend' => '',
                'frontend' => '',
                'label' => 'Editor content',
                'input' => 'textarea',
                'class' => '',
                'source' => '',
                'backend' => 'Magento\Eav\Model\Entity\Attribute\Backend\ArrayBackend',
                'global' => \Magento\Catalog\Model\ResourceModel\Eav\Attribute::SCOPE_GLOBAL,
                'visible' => true,
                'required' => false,
                'user_defined' => false,
                'default' => 0,
                'searchable' => false,
                'filterable' => true,
                'comparable' => false,
                'visible_on_front' => true,
                'used_in_product_listing' => true,
                'is_wysiwyg_enabled'      => TRUE,
                'unique' => false,
                'apply_to' => ''
            ]
        );
    }
}

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

VendoreName/ModuleName/view/adminhtml/ui_component

product_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="editor_content" 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">Editor Content</label>
                <dataScope>editor_content</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>

Run Command

php bin/magento s:up
php bin/magento c:c
php bin/magento c:f

Now you can see you custom editor attribute in Admin product form.

I Hope This helps You.

Answer 3

The above answer worked, but it is showing two times , one is text area and one is Wysiwyg. After add some content in that but not visible in product detail page.

Answer 4

The answer shared by Msquare is indeed correct but there are some small issues. First in the InstallData.php file which creates the attribute

is_wysiwyg_enabled => true,

should be changed to

wysiwyg_enabled => true,

Even though the column name in the catalog_eav_attribute is is_wysiwyg_enabled, the correct name to use in the setup scripts is wysiwyg_enabled. Magento internally maps the field from the setup script to the database column. A full list of mappings can be found here.

Next thing is, you don't actually need the product_form.xml file. Since the 'visible' => true, field was used in the setup script, the field will automatically appear in the product form in the general information section as a WYSIWYG editor. If you add the xml file, you will find the field repeated twice. Furthermore, if you change to 'visible' => false,, only 1 field will remain but it will not load the value of the field from the database.