How to Get WYSIWYG Editor’s data in Magento 2 Frontend

The technique to add WYSIWYG editor in Magento 2 system configuration makes the admin’s task much easier to work with content editing.  Have you checked the frontend after implementing WYSIWYG editor in the admin configuration?

Strange output, isn’t it? 😕

You can see the inability of the WYSIWYG editor to convert the HTML content.

Magento 2 fails to convert WYSIWYG content into the readable format in the condition when the content has been added from the WYSIWYG editor from the configuration section. To resolve the issue and get WYSIWYG editor’s data in Magento 2 frontend, follow the below method:

Method to Get WYSIWYG Editor’s data in Magento 2 Frontend:

1. Create registration.php file in app\code\[Vendor]\[Namespace]\
   
   <?php         \Magento\Framework\Component\ComponentRegistrar::register(             \Magento\Framework\Component\ComponentRegistrar::MODULE,             '[Vendor]_[Namespace]',             __DIR__         );

   1 2 3 4 5 6

   <?php         \Magento\Framework\Component\ComponentRegistrar::register(             \Magento\Framework\Component\ComponentRegistrar::MODULE,             '[Vendor]_[Namespace]',             __DIR__         );

2. Create module.xml file in app\code\[Vendor]\[Namespace]\etc
   
   <?xml version="1.0"?>     <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">         <module name="[Vendor]_[Namespace]" setup_version="1.0.0"/>     </config>

   1 2 3 4

   <?xml version="1.0"?>     <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">         <module name="[Vendor]_[Namespace]" setup_version="1.0.0"/>     </config>

3. Create ConfigBlock.php file in app\code\[Vendor]\[Namespace]\Helper
   
   
   <?php     namespace [Vendor]\[Namespace]\Helper;     use Magento\Framework\App\Helper\AbstractHelper;          class ConfigBlock extends AbstractHelper     {         protected $templateProcessor;         public function __construct(             Context $context,             \Zend_Filter_Interface $templateProcessor         )         {             $this->templateProcessor = $templateProcessor;             parent::__construct($context);         }         public function getConfigContent($content) // $content you need to pass config value         {             try{                 return $this->templateProcessor($content);             }catch (\Exception $e){                 return false;             }         }     }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

   <?php     namespace [Vendor]\[Namespace]\Helper;       use Magento\Framework\App\Helper\AbstractHelper;          class ConfigBlock extends AbstractHelper     {         protected $templateProcessor;         public function __construct(             Context $context,             \Zend_Filter_Interface $templateProcessor         )         {             $this->templateProcessor = $templateProcessor;             parent::__construct($context);         }         public function getConfigContent($content) // $content you need to pass config value         {             try{                 return $this->templateProcessor($content);             }catch (\Exception $e){                 return false;             }         }       }

    

That’s it.

Now you can use the WYSIWYG editor in the system configuration, and at the same get proper output in the frontend!

Feel free to post your doubts in the Comments section below and I’d be happy to help.

Thanks!