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 🙂
Please Reply ASAP