How to add WYSIWYG editor in magento 2 system.xml configuration

Welcome to Kishan Savaliya's Magento 2 Blog.In this blog post, I will explain how to add WYSIWYG editor in system.xml configuration. WYSIWYG is What You See Is What You Get editor, it'll allow you to add Images, HTML content, you can format your texts, you can add videos, you can add tables.

Let's start how to add WYSIWYG editor in Magento 2 system config. You can follow below given steps...

1.) Create system.xml config file.

Create system.xml file in your custom module and add wysiwyg editor.

app/code/SK/WysiwygEditorConfig/etc/adminhtml/system.xml

Content for this file is..

<?xml version="1.0"?>
<!--
/**
 * @package   SK\WysiwygEditorConfig
 * @author    Kishan Savaliya <kishansavaliyakb@gmail.com>
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
    <system>
        <tab id="sk_tab" translate="label" sortOrder="15">
            <label><![CDATA[SK Tab]]></label>
        </tab>
        <section id="sk_section" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Configuration</label>
            <tab>sk_tab</tab>
            <resource>SK_WysiwygEditorConfig::config</resource>

            <!-- SK Config Group -->
            <group id="sk_group" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>SK Config Group</label>
                <field id="wysiwyg_editor" translate="label" type="editor" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Wysiwyg Editor</label>
                    <frontend_model>SK\WysiwygEditorConfig\Block\Adminhtml\System\Config\Form\Field\WysiwygEditor</frontend_model>
                    <comment>sk_section/sk_group/wysiwyg_editor</comment>
                </field>
            </group>
            <!-- SK Config Group -->
        </section>
    </system>
</config>

2.) Create WysiwygEditor Block file.

Now we defined <fronttend_model> in above config file that is for element view so we need to create WysiwygEditor Block file here..

<?php
/**
 * @package   SK\WysiwygEditorConfig
 * @author    Kishan Savaliya <kishansavaliyakb@gmail.com>
 */

namespace SK\WysiwygEditorConfig\Block\Adminhtml\System\Config\Form\Field;

use Magento\Backend\Block\Template\Context;
use Magento\Cms\Model\Wysiwyg\Config as WysiwygConfig;
use Magento\Config\Block\System\Config\Form\Field as FormField;
use Magento\Framework\Data\Form\Element\AbstractElement;

class WysiwygEditor extends FormField
{
    protected $wysiwygConfig;
    
    public function __construct(
        Context $context,
        WysiwygConfig $wysiwygConfig,
        array $data = []
    ) {
        $this->_wysiwygConfig = $wysiwygConfig;
        parent::__construct($context, $data);
    }
    protected function _getElementHtml(AbstractElement $element)
    {
        $element->setWysiwyg(true);
        $element->setConfig($this->_wysiwygConfig->getConfig($element));
        /* $this->_wysiwygConfig->getConfig(['add_variables' => true,'add_widgets' => false,'add_images' => true,]); (Uncomment this line and set true false value if you want to enable disable add variable, widgetts or image feature from editor.)*/
        return parent::_getElementHtml($element);
    }
}

If you want to hide/show Add Widgets, Add Image buttons from editor then you can uncomment line and you can pass that value in getConfig() function.

3.) Add update handle of layout in adminhtml_system_config_edit.xml file..

Now, create adminhtml_system_config_edit.xml file here

app/code/SK/WysiwygEditorConfig/view/adminhtml/layout/adminhtml_system_config_edit.xml

Content for this file is...

<?xml version="1.0"?>
<!--
/**
 * @package   SK\WysiwygEditorConfig
 * @author    Kishan Savaliya <kishansavaliyakb@gmail.com>
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <update handle="editor" />
</page>

Now, run below commands once and check output in your system configuration.

php bin/magento setup:upgrade

Output :

Hope you may like this article and can understand this easily. You can add comments below in case if you have any questions regarding this article or if I missed anything here. I will check and get back to you with proper solution.

If you enjoyed this blog post, share it with friends!