Reading list Switch to dark mode

    How to Get WYSIWYG Editor on Admin Forms in Magento 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:


    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()
            $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']
            $fieldset = $form->addFieldset(
                ['legend' => __('Wysiwyg Editor'), 'class' => 'fieldset-wide']
            //in your form the wysiwyg field will be like this
                    'name' => 'body',
                    'label' => __('Content'),
                    'title' => __('Content'),
                    'style' => 'height:10em',
                    'required' => true,
                    'config' => $this->_wysiwygConfig->getConfig()
            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 🙂

    . . .
    Add a comment

    Leave a Comment

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


  • 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
    Webkul is impressive. I purchased Magento Mobile solution for Android and iOS. The apps are developed in a very professional way using the newest technologies.
    Mohammad Y Hammadi
    Web Developer
    Talk to Sales


    Live Chat

    Message Sent!

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

    Back to Home