How to use WYSIWYG Editor in Configuration Section in Magento 2?

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

Step 1: Form your system.xml

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

Build your Amazon-like multi-vendor marketplace website @ $249/- now!!!

              Get your free live demo now: Click here

WYSIWYG Editor in Configuration Section in Magento 2

Step 1:

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

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">

<system>

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

         <label>Custom Label</label>

         <tab>tabname</tab>

         <resource>[Name_Space]_[Your_Module]::config_[your_module]</resource>

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

                 <frontend_model>[Name_Space]\[Your_Module]\Block\Adminhtml\System\Config\Editor</frontend_model>

             </field>

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

         </group>

     </section>

</system>

</config>

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

<?php

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

     $element->setWysiwyg(true);

     // set configuration values

     $element->setConfig($this->_wysiwygConfig->getConfig($element));

     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 text editor in the configuration section of Magento 2. Using this guide, you can simply handle the HTML editor in the configuration section. Every store has a WYSIWYG editor in the configuration section of Magento 2 with various aspects.

Contact us to develop an online store with an ultimate eCommerce platform, the Magento.