{"id":1008,"date":"2024-01-12T17:23:51","date_gmt":"2024-01-12T11:53:51","guid":{"rendered":"https:\/\/magecurious.com\/blog\/?p=1008"},"modified":"2025-01-11T23:20:52","modified_gmt":"2025-01-11T17:50:52","slug":"how-to-add-wysiwyg-editor-in-system-xml-configuration-in-magento-2","status":"publish","type":"post","link":"https:\/\/magecurious.com\/blog\/how-to-add-wysiwyg-editor-in-system-xml-configuration-in-magento-2\/","title":{"rendered":"How to Add WYSIWYG Editor in system.xml Configuration in Magento 2"},"content":{"rendered":"\n

Hello Everyone,<\/p>\n\n\n\n

In this blog, we will learn about how to Add a WYSIWYG Editor in system.xml in Magento 2.<\/p>\n\n\n\n

Meaning of WYSIWYG is \u201cWhat You See Is What You Get\u201d. Using WYSIWYG editor you no need to HTML tags to design the page.<\/p>\n\n\n\n

The editor allows you to add HTML content, font, images etc. <\/p>\n\n\n\n

Without wasting your time, let us guide you straight away. Follow the easy step given below to Add WYSIWYG Editor in Configuration file in Magento 2.<\/p>\n\n\n\n

STEPS FOR ADD <\/strong>WYSIWYG EDITOR<\/strong> IN MAGENTO 2<\/strong><\/p>\n\n\n\n

Step 1: Create system.xml file<\/strong><\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/etc\/adminhtml\/system.xml<\/strong><\/p>\n\n\n

\n<?xml version="1.0"?>\n\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc\/system_file.xsd">\n\n\u00a0\u00a0\u00a0\u00a0<system>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tab id="magecurious" class="magecurious" translate="label" sortOrder="10">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>Magecurious<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tab>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<section id="extension" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<class>separator-top<\/class>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>Magecurious<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tab>magecurious<\/tab>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<resource>Vendor_Extension::config_extension<\/resource>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<group id="general" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>General Configuration<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>Enable Extension<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<source_model>Magento\\Config\\Model\\Config\\Source\\Enabledisable<\/source_model>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/field>\n\n<field id="vendor_wysiwyg_editor" translate="label" type="editor" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">\n\n<label>WYSIWYG Editor<\/label>\n\n<frontend_model>Vendor\\Extension\\Block\\Adminhtml\\System\\Config\\Editor<\/frontend_model>\n\n<\/field>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/group>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/section>\n\n\u00a0\u00a0\u00a0\u00a0<\/system>\n\n<\/config>\n<\/pre><\/div>\n\n\n
Step 2: Create Editor.php file<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/Block\/Adminhtml\/System\/Config\/Editor.php<\/strong><\/p>\n\n\n
\n<?php\n\nnamespace Vendor\\Extension\\Block\\Adminhtml\\System\\Config;\n\nuse Magento\\Backend\\Block\\Template\\Context;\n\nuse Magento\\Cms\\Model\\Wysiwyg\\Config as WysiwygConfig;\n\nuse Magento\\Config\\Block\\System\\Config\\Form\\Field;\n\nclass Editor extends Field\n\n{\n\n\u00a0\u00a0\u00a0\u00a0public function __construct(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Context $context,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0WysiwygConfig $wysiwygConfig,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array $data = [])\n\n\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->wysiwygConfig = $wysiwygConfig;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0parent::__construct($context, $data);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0protected function _getElementHtml(\\Magento\\Framework\\Data\\Form\\Element\\AbstractElement $element)\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$element->setWysiwyg(true);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$element->setConfig($this->wysiwygConfig->getConfig($element));\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return parent::_getElementHtml($element);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n}\n<\/pre><\/div>\n\n\n
Step 3: Finally run the below commands<\/strong><\/p>\n\n\n
\n$ php bin\/magento cache:clean\n\n$ php bin\/magento cache:flush\n<\/pre><\/div>\n\n\n
Step 4: Output:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
Final Thoughts:<\/strong><\/p>\n\n\n\n
So this was the easiest way which we have told you in this blog. This is how you can Add WYSIWYG Editor in system.xml configuration file in Magento 2. Hope you liked the blog.<\/p>\n\n\n\n
So quickly go to the comment box and tell me how you like this blog?<\/p>\n\n\n\n
Stay tuned with us on our site to get new updates of Magento.<\/strong><\/p>\n\n\n\n
Thanks for reading and visiting our site.<\/p>\n\n\n
      
          
        How useful was this post?      <\/p>              
        Click on a star to rate it!      <\/p>        
      
                      
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>              <\/ul>    <\/div>    
    <\/p>