How to use WYSIWYG Editors in Configuration Section in Magento 2

In this blog, We will clearly explain you how to use WYSIWYG editors in configuration section in Magento 2 through the following steps:

Step 1: Form your system.xml

Step 2: Next we outline editor class in file Editor.php

Step 1:

Form your system.xml in app/code/[Name_Space]/[Your_Module]/etc/adminhtml

<?xml version="1.0"?>

<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">


     <section id="yoursectionid" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">

         <label>Custom Label</label>



         <group id="general" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">

             <label>General Settings</label>

             <!-- WYSIWYG editor field code start-->

             <field id="editor_textarea" translate="label comment" sortOrder="1" type="editor" showInStore="1" showInDefault="1" >

                 <label>WYSIWYG Editor</label>



             <!-- WYSIWYG editor field code end-->





Step 2

Outline editor class in file Editor.php app/code/[Name_Space]/[Your_Module]/Block/Adminhtml/System/Config folder where we create WYSIWYG editor element


namespace [Name_Space]\[Your_Module]\Block;

use Magento\Framework\Registry;

use Magento\Backend\Block\Template\Context;

use Magento\Cms\Model\Wysiwyg\Config as WysiwygConfig;

use Magento\Framework\Data\Form\Element\AbstractElement;

class Editor extends \Magento\Config\Block\System\Config\Form\Field



* @var  Registry


protected $_coreRegistry;


* @param Context    $context

* @param WysiwygConfig $wysiwygConfig

* @param array      $data


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)


     // set wysiwyg for element


     // set configuration values


     return parent::_getElementHtml($element);



There may be some issues when modifying the structure of a website or a store view. The text area will not become ‘disabled’, if you can disregard it, so there is no problem.

The above steps mentioned are the effortless process to utilize the WYSIWYG editor in the configuration section of Magento 2. Using this guide, you can simply handle the WYSIWYG editor in the configuration section. Every store has a WYSIWYG editor in the configuration section of Magento 2 with various aspects.

Last Update: November 6, 2019  

March 5, 2018   1155   Nandini Ramachandran    Operations    
Total 1 Votes:

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *