In this blog post, we learn how to add WYSIWYG editor with textarea in admin system configuration options.
First we will add one system config field in system.xml file. Use below code to add new field with the type Editor.
1 2 3 4 | <field id="editortextarea" translate="label" type="editor" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Textare with WYSIWYG</label> <frontend_model>Hiddentechies\ConfigEditor\Block\Adminhtml\System\Config\Editor</frontend_model> </field> |
In order display WYSIWYG editor with this textarea we need one frontend block. so you can create editor.php file at below location.
1 | Hiddentechies\ConfigEditor\Block\Adminhtml\System\Config |
In this block you can write below code snippet.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?php namespace Hiddentechies\ConfigEditor\Block\Adminhtml\System\Config; class Editor extends \Magento\Config\Block\System\Config\Form\Field { protected $_wysiwygConfig; public function __construct( \Magento\Backend\Block\Template\Context $context, \Magento\Cms\Model\Wysiwyg\Config $wysiwygConfig, array $data = [] ) { $this->_wysiwygConfig = $wysiwygConfig; parent::__construct($context, $data); } protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element) { $element->setWysiwyg(true); $element->setConfig($this->_wysiwygConfig->getConfig($element)); return parent::_getElementHtml($element); } } |
Now please clear cache file and then go to module system configuration, you will get textarea with WYSIWYG option.
That’s it.
Write an article about ecommerce that help people to grow their ecommerce business. You’ll find best ecommerce guide, news, tips & more!
Leave a Reply