Reading list Switch to dark mode

    How To Parse WYSIWYG Editor Content In Template File

    Updated 1 February 2023

    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

    Searching for an experienced
    Magento Company ?
    Read More
     /**
         * 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.

    image-29
    WYSIWYG Editor


    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.

    image-30

    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.

    image-34

    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.

    image-33

    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. 🙂

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home