How to add WYSIWYG Editor in Magento 2 System Configuration

November 11, 2021 The Online Helper

To add the WYSIWYG editor in system configuration in Magento 2

Create system.xml

Directory

app\code\VendorName\ModuleName\etc\adminhtml\system.xml

Content of system.xml

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

Create Editor.php

Directory

app\code\VendorName\ModuleName\Block\Adminhtml\Editor.php

Content of Editor.php

<?php

namespace VendorName\ModuleName\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);
    }
}

We are providing the best Magento 2 Extensions at the lowest prices.

How to add WYSIWYG Editor in Magento 2 System Configuration

Create system.xml

Create Editor.php

Recent post