Reading list Switch to dark mode

    How to Get WYSIWYG Editor on Admin Forms in Magento 2

    Updated 15 March 2024

    In today’s tutorial, we’ll explore adding a WYSIWYG editor to Admin Forms. Incorporating a WYSIWYG editor enables collecting data from users conveniently.

    As Magento 2 includes the WYSIWYG editor as a default feature, there’s no need to install additional libraries.

    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 ?
    Find out 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 be able to get the editor in your form.

    image-12

    If you have any queries please comment below. Thanks 🙂

    . . .

    Leave a Comment

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


    1 comments

  • sachin arora
  • Back to Top

    Message Sent!

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

    Back to Home