---
title: "How to Add WYSIWYG Editor in System Configurations Magento 2"
url: "https://dolphinwebsolution.com/how-to-add-wysiwyg-editor-in-system-configurations-magento-2"
date: "2021-12-27T17:13:11+05:30"
modified: "2023-08-24T10:01:53+05:30"
author:
  name: "Jigar Patel"
categories:
  - "Magento"
word_count: 686
reading_time: "4 min read"
summary: "WYSIWYG is a content editing tool.In WYSIWYG editors the edited content whether text or graphics, appears in a form close to a final product.WYSIWYG HTML editor is an extremely useful tool to give ..."
description: "WYSIWYG is a content editing tool.In WYSIWYG editors the edited content whether text or graphics, appears in a form close to a final product.WYSIWYG HTML edi..."
keywords: "add wysiwyg editor,system configuration,wysiwyg html editor,html graphics, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "Best Profitable eCommerce Niches to Start Selling"
    url: "https://dolphinwebsolution.com/blog/profitable-ecommerce-niches/"
  - title: "How To Add Custom router in Magento2"
    url: "https://dolphinwebsolution.com/how-to-add-custom-router-in-magento2"
  - title: "How Much Does It Cost To Hire A Magento Developer?"
    url: "https://dolphinwebsolution.com/blog/cost-to-hire-magento-developer/"
---

# How to Add WYSIWYG Editor in System Configurations Magento 2

_Published: December 27, 2021_  
_Author: Jigar Patel_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/02/how-to-add-wYSIWYG-editor-in-system-configurations-magento-2-1-1024x536.jpg)

WYSIWYG is a content editing tool.In WYSIWYG editors the edited content whether text or graphics, appears in a form close to a final product.WYSIWYG HTML editor is an extremely useful tool to give your clients ability for editing and updating their website without bothering coders.

The WYSIWYG editor is enabled by default, and can be used to edit content on CMS pages and blocks, and in products and categories. From the configuration you can activate or deactivate the editor, and elect to use static, rather than [dynamic](https://docs.magento.com/user-guide/catalog/catalog-urls-dynamic-media.html), [URLS](https://docs.magento.com/user-guide/catalog/catalog-urls.html) for media content in product and category descriptions.

TinyMCE 4 is the default WYSIWYG editor. The implemented version, which is actually 4.6, offers an improved user experience and supports a wide range of WYSIWYG plugins. TinyMCE 3 was deprecated in the 2.4.0 release and is now removed in the 2.4.3 release.

The **system.xml** is a **configuration file** which is used to create configuration fields in **[Magento 2 System Configuration](https://dolphinwebsolution.com/how-to-add-custom-select-option-into-system-xml-magento-2)**. You will need this if your module has some settings which the admin needs to set. You can go to **`Store -> Setting -> Configuration`** to check how it look like.

### Steps to Add WYSIWYG Editor in System Configurations Magento 2

We are already learned [how to create a basic module in Magento 2](https://dolphinwebsolution.com/how-to-create-module-in-magento-2). We need to create **module.xml** and **registration.php** files. You can create **module.xml** and **registration.php** from this tutorial.

Here we are using **Dolphin** as Vendor name and **InvoiceEmail** as the name of the module. You can change this according to your Vendor and Module name.

#### Step 1: Create System XML
Create system config file **system.xml** in **app/code/Dolphin/InvoiceEmail/etc/adminhtml** folder with the following code.

```
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="dolphintab" translate="label" sortOrder="100">
            <label>Dolphin</label>
        </tab>
                    <class>separator-top</class>
            <label>label</label>
            <tab>dolphintab</tab>
            <resource>Dolphin_InvoiceEmail::config_extension</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1"
                   showInStore="1">
                <label>General</label>
                <field id="description" translate="label comment" type="editor" sortOrder="20" showInDefault="1"
                       showInWebsite="1" showInStore="1">
                    <label>Description</label>
                    <frontend_model>Dolphin\InvoiceEmail\Block\Adminhtml\Editor</frontend_model>
                </field>
            </group>
            </system>
</config>
```

The magento 2 system configuration page is divided logically into a few parts: Tabs, Sections, Groups, Fields.

The **system.xml** is located in **app/code/Dolphin/InvoiceEmail/etc/adminhtml** folder of the module, we will create a new Tab for our vendor “**Dolphin**”, a new Section for our module “**label**“, a Group to contain “**General**” simple fields: **Description.**

#### Step 2: Create Editor Class
Create Editor class in file **Editor.php** in Dolphin\\InvoiceEmail\\Block\\Adminhtml folder with the following code.

```
<?php

namespace Dolphin\InvoiceEmail\Block\Adminhtml;

use Magento\Backend\Block\Template\Context;
use Magento\Cms\Model\Wysiwyg\Config as WysiwygConfig;

class Editor extends \Magento\Config\Block\System\Config\Form\Field
{
    public function __construct(
        Context $context,
        WysiwygConfig $wysiwygConfig,
        array $data = []
    )
    {
        $this->_wysiwygConfig = $wysiwygConfig;
        parent::__construct($context, $data);
    }

    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $element->setWysiwyg(true);
        $element->setConfig($this->_wysiwygConfig->getConfig($element));
        return parent::_getElementHtml($element);
    }
}
```

Above class, file extends **\\Magento\\Config\\Block\\System\\Config\\Form\\Field**

Now execute the below command and go to the system configuration page:

```
[dt_highlight color="" text_color="" bg_color=""]php bin/magento c:c[/dt_highlight]
```

**Result:-**

After you implement the above code, check output in the admin panel of Magento 2. The WYSIWYG Editor will be displayed in the system configuration.

![Best AI Agent Development Companies in India (2026)](https://dolphinwebsolution.com/wp-content/uploads/2021/12/Configuration-Settings-Stores-Magento-Admin.png)

I Hope, This instruction will be helpful for you.

If you have any difficulties regarding this blog, do consider them posting in the Comments section below!

I’m here to help.

**Thank you!**


---

_View the original post at: [https://dolphinwebsolution.com/how-to-add-wysiwyg-editor-in-system-configurations-magento-2](https://dolphinwebsolution.com/how-to-add-wysiwyg-editor-in-system-configurations-magento-2)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:14:50 UTC_