Reading list Switch to dark mode

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

    . . .
    Add a comment

    Leave a Comment

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


    Be the first to comment.

    Back to Top
    Sumit was incredibly responsive and helpful to helping us set-up our system. I have never encountered such helpful and quick IT response before.
    Elizabeth Bennett-Parker
    Co-Director
    www.togetherwebake.org
    Talk to Sales

    Global

    Live Chat

    Message Sent!

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

    Back to Home