How to Add WYSIWYG Editor in Magento 2

WYSIWYG is a content editing tool. In WYSIWYG (What You See Is What You Get) editors, the content being edited—whether plain text or graphics—appears in a form closely resembling the final product. A WYSIWYG HTML editor is an incredibly useful tool that allows clients to edit and update their websites without needing to involve coders.

By default, the WYSIWYG editor is enabled and can be used to modify content on pages and blocks, as well as in products and categories. From the configuration you can activate or deactivate the editor, and elect to use static, rather than dynamic, URLS for media content in product and category descriptions.

Steps to Add WYSIWYG Editor in Magento 2

We need to create module.xml and registration.php files. You can create these files following the steps below.

Step 1: Create System XML

Create a system config file system.xml in the app/code/Vendor/Module/etc/adminhtml folder with the following code:

< ?xml version="1.0"?>
< config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
< system>
< tab id="moduletab" translate="label" sortOrder="100">
< label>Bluehorse< /label>
< section id="bhin" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1"
showInStore="1">
< class>separator-top
< label>label
< tab> moduletab
< resource>Vendor_Module::config_extension
< group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1"
showInStore="1">
< label>General
< field id="description" translate="label comment" type="editor" sortOrder="20" showInDefault="1"
showInWebsite="1" showInStore="1">
< label>Description
< frontend_model> Vendor\Module \Block\Adminhtml\Editor
< /field>
< /group>
< /section>
< /system>
< /config>

The Magento 2 system configuration page is divided logically into a few parts: Tabs, Sections, Groups, Fields.

The system.xml file is located in the app/code/Vendor/Module/etc/adminhtml folder of the module. We will create a new Tab for our vendor “Vendor,” a new Section for our module “label,” and a Group to contain “General” simple fields: Description.

Step 2: Create Editor Class

Create the Editor class in the Vendor\Module\Block\Adminhtml folder by creating the Editor.php file with the following code:

namespace Vendor\Module\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);
}
}

In conclusion, integrating a WYSIWYG editor into Magento 2 significantly enhances the content management experience by providing an intuitive, user-friendly interface. This tool empowers clients to make real-time updates and edits to their websites without requiring technical expertise or assistance from developers. By following the steps outlined, you can successfully add a WYSIWYG editor to your Magento 2 installation, thereby improving efficiency and streamlining the content editing process. This capability not only saves time but also ensures that the final output closely matches the visual expectations set during the editing phase.