Magento 2 : Create WYSIWYG editor in configurations

WYSIWYG stands for “What You See Is What You Get.” It refers to a type of interface or application in which the user can see and interact with the final output while they are creating or editing a document or webpage. The output is a representation of the final product, and the user can see how their changes will affect the final result in real time. This is in contrast to other interfaces, such as code-based interfaces, where the user must write code to create a document or webpage, and cannot see the final output until the code is run. Magento 2 Also provide WYSIWYG editor flexibility in product and configuration .

These extensions allow website administrators and content managers to edit and create pages, products and other content types with a WYSIWYG interface that mimics the final layout of the website. It is not only easy to use but also a time saver and a great tool for creating and editing page layout, images, and other elements on a Magento site.

In This blog we will create a WYSIWYG in Configurations. The Module Namespace for my module is Gm_Module

Step 1: add the following code in your system.xml

app/code/Gm/Module/etc/adminhtml/system.xml

<field id="wysiwyg_editor" translate="label comment" sortOrder="26" type="editor" showInStore="1" showInDefault="1" >
     <label>WYSIWYG Editor</label>
     <frontend_model>Gm\Module\Block\Adminhtml\System\Config\Editor</frontend_model>
</field>

Step 2: add the following code in your Editor.php class

app/code/Gm/Module/Block/Adminhtml/System/Config/Editor

<?php

namespace Gm\Module\Block\Adminhtml\System\Config;

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)
    {
        $element->setWysiwyg(true);
        $element->setConfig($this->_wysiwygConfig->getConfig($element));
        return parent::_getElementHtml($element);
    }
}

Step 3: Flush the cache and your wysiwyg editor will be visible now.