How to add WYSIWYG Editor to Dynamic fields in System Configuration in Magento 2

Question

I want to add WYSIWYG Editor in Dynamic fields in System Configuration . enter image description here

• Vishwas Bhatnagar: Share the code of the module here so that we can suggest the edit or you can refer to this link webkul.com/blog/…

Answer 1

Step1# open your module system.xml from

app/code/NameSpace/ModuleName/etc/adminhtml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
 <system>
 <section id="yoursectionid" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Custom Label</label>
 <tab>tabname</tab>
 <resource>NameSpace_ModuleNmae::config_modulename</resource>
 <group id="general" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>General Settings</label>
 <!-- WYSIWYG editor field code start-->
 <field id="editor_textarea" translate="label comment" sortOrder="1" type="editor" showInStore="1" showInDefault="1" >
 <label>WYSIWYG Editor</label>
 <frontend_model>NameSpace\ModuleName\Block\Adminhtml\System\Config\Editor</frontend_model>
 </field>
 <!-- WYSIWYG editor field code end-->
 </group>
 </section>
 </system>
</config>

step #2 : Now we create Editor class in file Editor.php at app/code/NameSpace/ModuleName/Bloc/Adminhtml/System/Config folder where we create WYSIWYG editor element

<?php
namespace NameSpace\ModuleName\Block;
use Magento\Framework\Registry;
use Magento\Backend\Block\Template\Context;
use Magento\Cms\Model\Wysiwyg\Config as WysiwygConfig;
use Magento\Framework\Data\Form\Element\AbstractElement;
class Editor extends \Magento\Config\Block\System\Config\Form\Field
{
 /**
 * @var Registry
 */
 protected $_coreRegistry;
 /**
 * @param Context $context
 * @param WysiwygConfig $wysiwygConfig
 * @param array $data
 */
 public function __construct(
 Context $context,
 WysiwygConfig $wysiwygConfig,
 array $data = []
 ) {
 $this->_wysiwygConfig = $wysiwygConfig;
 parent::__construct($context, $data);
 }
 protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
 {
 // set wysiwyg for element
 $element->setWysiwyg(true);
 // set configuration values 
 $element->setConfig($this->_wysiwygConfig->getConfig($element));
 return parent::_getElementHtml($element);
 }
}

Thanks :-)

Please Reference This Coding this will help you :-)

• Garry: I have just tried your code and the editor appears +1 but the insert image and variable don't work. Any ideas?
• Divyesh: MagentoCmsModelTemplateFilterProvider $filterProvider $content = ‘{{media url="wysiwyg/some_image.jpg"}}’; $contentGenerating = $this->_filterProvider->getPageFilter()->filter($content); echo $contentGenerating; //Generate HTML
• aravind: @Divyesh could you update your code with answer provided in the comment