{"id":500,"date":"2019-07-09T21:30:17","date_gmt":"2019-07-09T21:30:17","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/07\/09\/get-wysiwyg-editors-data-in-magento-2-frontend\/"},"modified":"2025-05-22T16:22:59","modified_gmt":"2025-05-22T10:52:59","slug":"get-wysiwyg-editors-data-in-magento-2-frontend","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/get-wysiwyg-editors-data-in-magento-2-frontend\/","title":{"rendered":"How to Get WYSIWYG Editor\u2019s data in Magento 2 Frontend"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The technique to&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/add-wysiwyg-editor-in-magento-2-system-configuration\/\" target=\"_blank\" rel=\"noreferrer noopener\">add WYSIWYG editor in Magento 2 store configuration<\/a>&nbsp;makes the admin\u2019s task much easier to work with content editing.&nbsp; Have you checked the frontend after implementing WYSIWYG editor in the admin configuration?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Strange output, isn\u2019t it?&nbsp; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can see the inability of the WYSIWYG editor to convert the HTML content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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&nbsp;<em><strong>get WYSIWYG editor\u2019s data in Magento 2 frontend<\/strong><\/em>, follow the below method:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Get WYSIWYG Editor\u2019s data in Magento 2 Frontend:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. Create&nbsp;<strong>registration.php<\/strong>&nbsp;file in&nbsp;<em><em><strong><em><em><strong>app\\code\\[Vendor]\\[Namespace]\\<\/strong><\/em><\/em><\/strong><\/em><\/em><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n        \\Magento\\Framework\\Component\\ComponentRegistrar::register(\n            \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n            '[Vendor]_[Namespace]',\n            __DIR__\n        );<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">2. Create&nbsp;<strong>module.xml<\/strong>&nbsp;file in&nbsp;<em><em><strong><em><em><strong>app\\code\\[Vendor]\\[Namespace]\\etc<\/strong><\/em><\/em><\/strong><\/em><\/em><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\"?>\n    &lt;config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n        &lt;module name=\"[Vendor]_[Namespace]\" setup_version=\"1.0.0\"\/>\n    &lt;\/config><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">3. Create&nbsp;<strong>ConfigBlock.php<\/strong>&nbsp;file in&nbsp;<em><strong><em><strong>app\\code\\[Vendor]\\[Namespace]\\Helper<\/strong><\/em><\/strong><\/em><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n    namespace [Vendor]\\[Namespace]\\Helper;\n\n    use Magento\\Framework\\App\\Helper\\AbstractHelper;\n    \n    class ConfigBlock extends AbstractHelper\n    {\n        protected $templateProcessor;\n        public function __construct(\n            Context $context,\n            \\Zend_Filter_Interface $templateProcessor\n        )\n        {\n            $this->templateProcessor = $templateProcessor;\n            parent::__construct($context);\n        }\n        public function getConfigContent($content) \/\/ $content you need to pass config value\n        {\n            try{\n                return $this->templateProcessor($content);\n            }catch (\\Exception $e){\n                return false;\n            }\n        }\n\n    }<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now you can use the WYSIWYG editor in the system configuration,&nbsp;and at the same get proper output in the frontend!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The technique to&nbsp;add WYSIWYG editor in Magento 2 store configuration&nbsp;makes the admin\u2019s task much easier to work with content editing.&nbsp; Have you checked the frontend&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-500","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=500"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/500\/revisions"}],"predecessor-version":[{"id":15350,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/500\/revisions\/15350"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}