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:

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

   1 2 3 4 5

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

2. 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);     } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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

I’d like to hear the readers’ opinions or solve their doubts mentioned in the Comments section below 🙂

Thank you.