How to add WYSIWYG Editor in Magento 2 System Configuration

WYSIWYG is an HTML editor for easy content editing. WYSIWYG enables adding and formatting the content providing “What You See Is What You Get ” view. Preview the end result in the editing phase itself and thus avoid handling HTML tags! Interesting, isn’t it? 

However, the default Magento 2 does not offer WYSIWYG editor in the system configuration. Admin may want to display messages in a certain manner in frontend. The WYSIWYG editor makes the task simpler.

To overcome the default Magento 2 limitation, implement the below method to add WYSIWYG editor in Magento 2 system configuration.

Method to Add WYSIWYG Editor in Magento 2 System Configuration:

• Add below code in the system.xml file

<field id="description" translate="label comment" type="editor" sortOrder="20" showInDefault="1"
                       showInWebsite="1" showInStore="1">
    <label>Description </label>
    <frontend_model>Vendor\Extension\Block\Adminhtml\Editor</frontend_model>
</field>

• Create new file Editor.php at Vendor\Extension\Block\Adminhtml folder

<?php

namespace Vendor\Extension\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);
    }
}

That’s all about WYSIWYG editor in system configuration for Magento 2!

Once you implement this solution, please refer our blog Add WYSIWYG Editor in Magento 2 System Configuration

Thank you.