---
title: "How to Get WYSIWYG Editor Data In Frontend Magento 2"
url: "https://dolphinwebsolution.com/how-to-get-wysiwyg-editor-data-in-frontend-magento-2"
date: "2021-12-30T16:35:50+05:30"
modified: "2023-08-25T08:54:28+05:30"
author:
  name: "Jigar Patel"
categories:
  - "Magento"
word_count: 468
reading_time: "3 min read"
summary: "Magento 2 WYSIWYG is a editor that allows users to create content in the back-end without tampering with code. Users will be able to see the result instantly, as the front-end.If you prefer to work..."
description: "Magento 2 WYSIWYG is a editor that allows users to create content in the back-end without tampering with code. Users will be able to see the result instantly..."
keywords: "get wysiwyg editor data,wysiwyg content editor,Zend_Filter_Interface,editor, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to add attribute options values into dropdown attribute programmatically"
    url: "https://dolphinwebsolution.com/how-to-add-attribute-options-values-into-dropdown-attribute-programmatically"
  - title: "How to Add Custom Tab to Admin Sales Order View in Magento 2"
    url: "https://dolphinwebsolution.com/add-custom-tab-to-admin-sales-order-view-in-magento-2"
  - title: "How to Create Product Attribute in Magento 2"
    url: "https://dolphinwebsolution.com/how-to-create-product-attribute-in-magento-2"
---

# How to Get WYSIWYG Editor Data In Frontend Magento 2

_Published: December 30, 2021_  
_Author: Jigar Patel_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/02/How-to-Get-WYSIWYG-Editor-Data-In-Frontend-Magento-2-1024x536.png)

Magento 2 **WYSIWYG** is a editor that allows users to create content in the back-end without tampering with code. Users will be able to see the result instantly, as the front-end.If you prefer to work directly with the underlying HTML code, you can easily change modes. The editor can be used to create content for pages, blocks, and product descriptions. When working on product detail, access the editor by clicking Show / Hide Editor.

**Read This:-** [How to Add WYSIWYG Editor in System Configurations Magento 2](https://dolphinwebsolution.com/how-to-add-wysiwyg-editor-in-system-configurations-magento-2)

From Magento 2.4 version, **TinyMCE 3** is replaced as the default editor by **TinyMCE4**.

To see the difference between **TinyMCE4** and **TinyMCE3**, check the following images.

**TinyMCE3** is complicated with multiple settings. Check **TinyMCE3** detailed function in Magento User Guide for Merchants.

![AI Integration in Magento: Benefits, Use Cases and Business Impact](https://dolphinwebsolution.com/wp-content/uploads/2021/12/TinyMCE3.png)

**TinyMCE4** is simplified in both design and function. This new version makes the editor more effective and less unwieldy than **TinyMCE3**.

![AI Integration in Magento: Benefits, Use Cases and Business Impact](https://dolphinwebsolution.com/wp-content/uploads/2021/12/TinyMCE4.png)

With **TinyMCE4**, Magento 2 **WYSIWYG** editor toolbar shows you many features, including:

- Text formats
- Text size
- Line Height
- Text color
- Highlight color
- Bold
- Italic
- Underline
- Alignment
- List options
- Bullet options
- Add link
- Add image
- Add table
- Add widget
- Add variables

If you directly print **WYSIWYG** content into the readable format in the condition when the content has been added from the WYSIWYG editor from the admin side .The content you will be getting strange results. to resolve that issue WYSIWYG editor’s data in Magento 2 frontend,follow the below method:

## Steps to Get WYSIWYG Editor Data In Frontend Magento 2

Here we are using **Dolphin** as Vendor name and **MyModule** as the name of a module. You can change this according to your Vendor and Module name.

### Step 1: Create Registration

Create **registration.php** file in the **app/code/Dolphin/MyModule** folder with the following code.

```
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Dolphin_MyModule',
    __DIR__
);
```

### Step 2: Create a module

Create a **module.xml** file in the **app/code/Dolphin/MyModule/etc** folder with the following code.

```
<?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="Dolphin_MyModule" setup_version="1.0.0"></module>
</config>
```

### Step 3: Create a Helper

Create a **Data.php** file in the **app/code/Dolphin/MyModule/Helper** with the following code.

Add a dependency Zend\_Filter\_Interface to your block

```
<?php
    namespace Dolphin\MyModule\Helper;

    use Magento\Framework\App\Helper\AbstractHelper;

    class Data extends AbstractHelper
    {
        protected $templateProcessor;
        public function __construct(
            Context $context,
            \Zend_Filter_Interface $templateProcessor
        )
        {
            $this->templateProcessor = $templateProcessor;
            parent::__construct($context);
        }
        public function getWysiwygContent($content)
        {
            try{
                return $this->templateProcessor($content);
            }catch (\Exception $e){
                return false;
            }
        }

    }
```

I Hope, This instruction will be helpful for you.

If you have any difficulties regarding this blog, do consider them posting in the Comments section below!

**Thank you!**


---

_View the original post at: [https://dolphinwebsolution.com/how-to-get-wysiwyg-editor-data-in-frontend-magento-2](https://dolphinwebsolution.com/how-to-get-wysiwyg-editor-data-in-frontend-magento-2)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:17:51 UTC_