Read More
Menu Close

    How to Get WYSIWYG Editor on Admin Forms in Magento 2

    Magento-Code-Snippet-1-300x95-2

    Today, we will see how to add wysiwyg editor on Admin Forms. Sometimes it is required to add the wysiwyg editor to collect data from the user. WYSIWYG editor is Magento 2 default editor so we dont need to install its library, its already available.

    Lets start the coding part:

    My module directory is as such:

    app/code/Webkul/Wysiwyg/Block/Adminhtml/GetEditor/Edit/Form.php

    Searching for an experienced
    Magento Company ?
    Read More

    Content of Form.php

    class Form extends \Magento\Backend\Block\Widget\Form\Generic
    {
    
        /**
         * @var \Magento\Cms\Model\Wysiwyg\Config
         */
        protected $_wysiwygConfig;
        /**
         * @var \Magento\Store\Model\System\Store
         */
        protected $_systemStore;
    
        /**
         * @param \Magento\Backend\Block\Template\Context $context
         * @param \Magento\Framework\Registry $registry
         * @param \Magento\Framework\Data\FormFactory $formFactory
         * @param \Magento\Store\Model\System\Store $systemStore
         * @param array $data
         */
        public function __construct(
            \Magento\Backend\Block\Template\Context $context,
            \Magento\Framework\Registry $registry,
            \Magento\Framework\Data\FormFactory $formFactory,
            \Magento\Store\Model\System\Store $systemStore,
            \Magento\Cms\Model\Wysiwyg\Config $wysiwygConfig, //in your constructor pass the following argument
            array $data = []
        ) {
            $this->_wysiwygConfig = $wysiwygConfig;
            $this->_systemStore = $systemStore;
            parent::__construct($context, $registry, $formFactory, $data);
        }
    
        /**
         * Init form
         *
         * @return void
         */
        protected function _construct()
        {
            parent::_construct();
            $this->setId('wysiwyg_form');
            $this->setTitle(__('Wysiwyg Editor'));
        }
    
        /**
         * Prepare form
         *
         * @return $this
         */
        protected function _prepareForm()
        {
            
            $form = $this->_formFactory->create(
                ['data' => [
                            'id' => 'edit_form',
                            'enctype' => 'multipart/form-data',
                            'action' => $this->getData('action'),
                            'method' => 'post']
                        ]
            );
            $form->setHtmlIdPrefix('wys_');
            $fieldset = $form->addFieldset(
                'base_fieldset',
                ['legend' => __('Wysiwyg Editor'), 'class' => 'fieldset-wide']
            );
            //in your form the wysiwyg field will be like this
            $fieldset->addField(
                'body',
                'editor',
                [
                    'name' => 'body',
                    'label' => __('Content'),
                    'title' => __('Content'),
                    'style' => 'height:10em',
                    'required' => true,
                    'config' => $this->_wysiwygConfig->getConfig()
                ]
            );
            
            $form->setUseContainer(true);
            $this->setForm($form);
            return parent::_prepareForm();
        }
    }

    That’s it just, you will we able to get the editor in your form. Now, we will see How to get this WYSIWYG field content in my next post. http://webkul.com/blog/how-to-get-wysiwyg-editor-on-admin-forms-in-magento-2/

    If you have any query please comment below. Thanks 🙂

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    1 comments

  • sachin arora
    Hello can you please tell me complete code , so that i can use it for Marketing->Email Template.

    Please Reply ASAP

  • Back to Top