How To Parse WYSIWYG Editor Content In Template File

When you use WYSIWYG editor for getting data, then often you need to parse the directive tags {{…}} to get the final output. If you directly print the content you will be getting strange results. So, always its a good practice to filter the content before printing it.

As In Magento 1 we can use

Mage::helper('cms')->getPageTemplateProcessor()->filter($this->getContent());

We will see How to do it in Magento 2.

Lets look into the Magento 2 core files, how do they do it.

File: /vendor/magento/module-cms/Block/Page.php

 /**
     * Prepare HTML content
     *
     * @return string
     */
    protected function _toHtml()
    {
        $html = $this->_filterProvider->getPageFilter()->filter($this->getPage()->getContent());
        return $html;
    }

Similarly, we will gonna do this to filter the content of WYSIWYG editor.
To implement from the basics, create a custom WYSIWYG editor field in your custom form, in our case, we are creating it in Admin Config. Check the image below.

Now, add a Directive in the above created WYSIWYG editor, for example, you want to add a directive for custom block to render a template, use {{block class=’Vendor\\Module\\Block\\Index’ area=’frontend’}} and inside this block, define a variable protected $_template = “example.phtml” to call that template on call of the above Directive. Now, save this in your database. After saving, your db value must be saved like this.

Now, create another Block for filtering the directive data. In your Block file create a function to return the filtered HTML content

<?php
/**
 * Webkul WYSIWYG Content Block.
 *
 * @category    Webkul
 * @package     Webkul_WYSIWYG
 * @author      Webkul Software Private Limited
 */

namespace Webkul\WYSIWYG\Block\Content;

use Magento\Store\Model\StoreManagerInterface;

class Content extends \Magento\Framework\View\Element\Template
{
    /**
     * @var \Magento\Framework\App\Config\ScopeConfigInterface
     */
    protected $_scopeConfig;
    
    /**
     * @var \Magento\Cms\Model\Template\FilterProvider
     */
    protected $_filterProvider;

    /**
     * Store manager
     *
     * @var \Magento\Store\Model\StoreManagerInterface
     */
    protected $_storeManager;

    /**
     * @param \Magento\Backend\Block\Template\Context    $context
     * @param array                                      $data
     */
    public function __construct(
        \Magento\Cms\Model\Template\FilterProvider $filterProvider,
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    ) {
        $this->_scopeConfig = $context->getScopeConfig();
        $this->_storeManager = $context->getStoreManager();
        $this->_filterProvider = $filterProvider;
        parent::__construct($context, $data);
    }

    /**
     * Prepare layout.
     *
     * @return this
     */
    public function _prepareLayout()
    {
        $pageMainTitle = $this->getLayout()->getBlock('page.main.title');
        if ($pageMainTitle) {
            $pageMainTitle->setPageTitle('WYSIWYG Content');
        }

        return parent::_prepareLayout();
    }

    
    /**
     * Prepare HTML content
     *
     * @return string
     */
    public function getCmsFilterContent($value='')
    {
        $html = $this->_filterProvider->getPageFilter()->filter($value);
        return $html;
    }
}

Before filtering, your template would be rendered as below given image.

In template file just call the function getCmsFilterContent() with the content to be filtered.

<div>
<?php	$html = $block->getCmsFilterContent($content); //content to be filtered	?>
	<p>
	<?php echo $html ?>
	</p>
</div>

After filtering the Directive, the data will be displayed as plain texts as you need.

You can also learn How to get the WYSIYG editor in admin forms from my another post.  http://webkul.com/blog/how-to-get-wysiwyg-editor-on-admin-forms-in-magento-2/

If you have any query or feedback, please comment below. Thanks for reading. 🙂