How to Add WYSIWYG Editor in Magento 2 Store Configuration

In this tutorial, Today I will explain how to add WYSIWYG editor in Magento 2 Store Configuration. WYSIWYG editor is used in backend for content editing. It allows you to add HTML Content, Images, Font Styles etc.

So, Let’s start to add WYSIWYG editor store configuration.

You may also like this :

1) First of all, Add this below code in your system.xml file to add WYSIWYG editor to store configuration at this file path app/code/Vendor/Module/etc/adminhtml/ :

Copy Code


<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Created By : Rohan Hapani
 */
-->
<field id="wysiwyg_editor_field" translate="label comment" type="editor" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
   <label>WYSIWYG Editor</label>
   <frontend_model>Vendor\Module\Block\Adminhtml\System\Config\Form\Field\Editor</frontend_model>
</field>

2) Secondly, Create Block file Editor.php at this file path app/code/Vendor/Module/Block/Adminhtml/System/Config/Form/Field/ :

Copy Code


<?php
/**
 * Created By : Rohan Hapani
 */
namespace Vendor\Module\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 Editor extends FormField
{
    /**
     * @var WysiwygConfig
     */
    protected $wysiwygConfig;
    
    /**
     * @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(AbstractElement $element)
    {
        $element->setWysiwyg(true);
        $element->setConfig($this->_wysiwygConfig->getConfig($element)); // If you want to remove specific button then use this below code in setConfig()
        /** * $this->_wysiwygConfig->getConfig(['add_variables' => true,'add_widgets' => false,'add_images' => true,]) */
        return parent::_getElementHtml($element);
    }
}

Here, If you want to remove Insert Widget, Insert Images buttons etc. from WYSIWYG editor then, I also add solution on this above code. You can set true/false value based on your requirement.s

3) Then, Create adminhtml_system_config_edit.xml file and paste this below code to add update handle of layout at this file path app/code/Vendor/Module/view/adminhtml/layout/adminhtml_system_config_edit.xml :

Copy Code


<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Created By : Rohan Hapani
 */
-->
<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>

That’s it !!!

Now, you can able to use WYSIWYG editor in your store configuration and save value.

In Last, Just clean cache using below command and check it :

Copy Code

php bin/magento c:c

I hope this blog is easy to understand about how to add WYSIWYG editor in Magento 2 Store Configuration. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution.

Keep liking and sharing 🙂

Post Views: 3,700