1

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

1
  • please check my answer and update me.
    – Msquare
    Commented Jul 1, 2020 at 8:34

6 Answers 6

2

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".

enter image description here

I hope this is helpful to you!!

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.

1

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.

1
  • This is still the case and sould be further up to the most voted answer. All resources I found were using is_wysiwyg_enabled, which doesn't work. Commented Jun 10 at 12:34
0

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.

0

Let's create Text Editor (WYSIWYG Editor) product attribute programatically using Data Patch.

Here, Our vendor Name is Vendor & Module name is ProductCustomAttribute.

Create a data patch file to following directory: Vendor/ProductCustomAttribute/Setup/Patch/Data/AddProductInfoTextProductAttribute.php

Add below content to data patch file:

<?php
declare(strict_types=1);

namespace Vendor\ProductCustomAttribute\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 AddProductInfoTextProductAttribute 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\Product::ENTITY,
            'product_info_text',
            [
                'type' => 'text',
                'label' => 'Product Info Text',
                'input' => 'textarea',
                'source' => '',
                'frontend' => '',
                'required' => false,
                'backend' => '',
                'sort_order' => '30',
                'global' => ScopedAttributeInterface::SCOPE_STORE,
                'default' => null,
                'visible' => true,
                'user_defined' => true,
                'searchable' => true,
                'filterable' => true,
                'comparable' => true,
                'visible_on_front' => true,
                'wysiwyg_enabled' => true,
                'is_html_allowed_on_front' => true,
                'unique' => false,
                'apply_to' => 'simple,grouped,bundle,configurable,virtual',
                'group' => 'General',
                'used_in_product_listing' => true,
                'is_used_in_grid' => true,
                'is_visible_in_grid' => false,
                'is_filterable_in_grid' => false,
                'option' => []
            ]
        );

        $this->moduleDataSetup->getConnection()->endSetup();
    }

    /**
     * @inheritdoc
     */
    public function revert()
    {
        $this->moduleDataSetup->getConnection()->startSetup();
        /** @var EavSetup $eavSetup */
        $eavSetup = $this->eavSetupFactory->create(['setup' => $this->moduleDataSetup]);
        $eavSetup->removeAttribute(\Magento\Catalog\Model\Product::ENTITY, 'product_info_text');

        $this->moduleDataSetup->getConnection()->endSetup();
    }

    /**
     * @inheritdoc
     */
    public function getAliases()
    {
        return [];
    }

    /**
     * @inheritdoc
     */
    public static function getDependencies()
    {
        return [];
    }
}

Please run Magento commands:

php bin/magento s:up && php bin/magento s:d:c

It will create text editor product attribute.

See Result:

Product custom attribute with text editor type

0

You can enable/disable WYSIWYG Editor in Magento.

Magento Provides the "Text Editor" of Catalog Input Type for Store Owner. Text Editor input type requires WYSIWYG to be enabled in Stores > Configuration > Content Management.

1. Create Attribute

Go to Stores > Attributes > Product > Add New Attribute (Button top right) > Attribute Properties > Catalog Input Type for Store Owner (Text Editor) enter image description here

2. Attribute set

Set created attribute in attribute set. Go to Stores > Attributes > Attribute Set > Default > (Drag that attribute (custom_block) from the "Unassigned Attributes" column and put Groups column)

3. Output in Product

You can check the output in products. Go to Catalog > Inventory > Products > Add Product (Find attribute "custom_block") enter image description here

I hope this is helpful to you!!

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.