How to Add WYSIWYG Editor in Magento 2 Store?

May 22, 2020

Now add WYSIWG editor in Magento 2 store configuration with easy few steps. The WYSIWYG editor is specially used in back-end for editing the content. The editor allows you to add HTML content, images, font styles etc.

Steps to Add Magento 2 WYSIWYG Editor in Your Store

Step 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/ :

<?xml version="1.0" encoding="UTF-8"?>
<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>

Step 2. Secondly,

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

<?php
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 are willing to remove Insert Widget, Insert Images buttons etc. from WYSIWYG editor then, here is the solution in this above code. You can set true/false value based on your requirements.

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

<?xml version="1.0" encoding="UTF-8"?>
<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 !!! Here now you can use WYSIWYG editor in your store configuration and save the value.

Step 4. Lastly, clean cache using below command and check it :