How to Get WYSIWYG Editor on Admin Forms in Magento 2

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

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.

If you have any queries please comment below. Thanks 🙂

Ayaz Mittaqi 5 Badges

• 15 Mar, 2024
  Updated by - Anupam Rastogi
• 13 Jan, 2023
  Updated by - Anupam Rastogi

View More