Read More
Read More
Menu Close

    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

    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.
    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;
        }
    }

    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>
    

    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