Magento 2: Add Wysiwyg to dynamic fields in System Configuration

Question

I need to add a wysiwyg editor to dynamic fields on the system configuration, the issue is that the editor never render, this is the code i have so far:

system.xml

<group id="diagnosis" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Sección diagnóstico</label>
 <field id="diagnosis_title" translate="label" type="editor" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Título del diagnóstico</label>
 <comment>Introduce el texto del diagnóstico.</comment>
 <frontend_model>G4A\ObstructiveSleepApnea\Block\Adminhtml\System\Config\Form\Field\Editor</frontend_model>
 </field>
 <field id="diagnosis_list_box" type="text" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Síntomas</label>
 <frontend_model>G4A\ObstructiveSleepApnea\Block\Adminhtml\Form\Field\DiagnosisList</frontend_model>
 <backend_model>Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</backend_model>
 </field>
 </group>

<?php
namespace G4A\ObstructiveSleepApnea\Block\Adminhtml\Form\Field;
use Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray;
use Magento\Backend\Block\Template\Context;
use Magento\Cms\Model\Wysiwyg\Config as WysiwygConfig;
use Psr\Log\LoggerInterface;
class DiagnosisList extends AbstractFieldArray
{
 
 protected $_wysiwygConfig;
 protected $_wysiwygRenderer;
 protected $logger;
 public function __construct(
 Context $context,
 WysiwygConfig $wysiwygConfig,
 array $data = [],
 LoggerInterface $logger
 ) {
 $this->_wysiwygConfig = $wysiwygConfig;
 $this->logger = $logger;
 parent::__construct($context, $data);
 }
 protected function _prepareToRender()
 {
 // $this->addColumn('diagnosis1', ['label' => __('Diagnóstico parte 1'), 'class' => 'required-entry']);
 // $this->addColumn('diagnosis2', ['label' => __('Diagnóstico parte 2'), 'class' => 'required-entry']);
 $this->addColumn('wysiwyg_field', [
 'label' => __('Diágnostico'),
 'renderer' => $this->_getWysiwygRenderer()
 ]);
 $this->_addAfter = false;
 $this->_addButtonLabel = __('Agregar');
 }
 protected function _getWysiwygRenderer()
 {
 if (!$this->_wysiwygRenderer) {
 $this->_wysiwygRenderer = $this->getLayout()->createBlock(
 'G4A\ObstructiveSleepApnea\Block\Adminhtml\System\Config\Form\Field\Editor',
 //'G4A\ObstructiveSleepApnea\Block\Adminhtml\System\Config\Form\Field\Wysiwyg',
 '',
 ['data' => ['is_render_to_js_template' => true]]
 );
 }
 //\Magento\Framework\App\ObjectManager::getInstance()->get('Psr\Log\LoggerInterface')->info(print_r($this->_wysiwygRenderer , true));
 return $this->_wysiwygRenderer;
 }
}

<?php
namespace G4A\ObstructiveSleepApnea\Block\Adminhtml\System\Config\Form\Field;
use Magento\Backend\Block\Template\Context;
use Magento\Cms\Model\Wysiwyg\Config as WysiwygConfig;
use Magento\Config\Block\System\Config\Form\Field as FormFIeld;
use Magento\Framework\Data\Form\Element\AbstractElement;
class Editor extends FormField
{
 protected $_wysiwygConfig;
 public function __construct(
 Context $context,
 WysiwygConfig $wysiwygConfig,
 array $data = []
 )
 {
 $this->_wysiwygConfig = $wysiwygConfig;
 parent::__construct($context, $data);
 }
 protected function _getElementHtml(AbstractElement $element)
 {
 $element->setWysiwyg(true);
 $config = $this->_wysiwygConfig->getConfig(['tab_id' => $element->getId()]);
 //\Magento\Framework\App\ObjectManager::getInstance()->get('Psr\Log\LoggerInterface')->info(print_r($config, true));
 $element->setConfig($config);
 return parent::_getElementHtml($element);
 }
}

enter image description here

Any hint is apreciated.

Answer 1

@Carlos A Magaña Perez

Hey,

Step 1: Create a Custom Module Create the module directory structure:

app/code/YourVendor/YourModule/

Create the registration.php file:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
 \Magento\Framework\Component\ComponentRegistrar::MODULE,
 'YourVendor_YourModule',
 __DIR__
);

Create the module.xml file:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
 <module name="YourVendor_YourModule" setup_version="1.0.0"/>
</config>

Step 2: Add System Configuration Create the system.xml file in app/code/YourVendor/YourModule/etc/adminhtml/:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
 <system>
 <section id="your_section" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Your Section Label</label>
 <tab>general</tab>
 <resource>Magento_Config::config</resource>
 <group id="your_group" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Your Group Label</label>
 <field id="your_field" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Your Field Label</label>
 <frontend_model>YourVendor\YourModule\Block\Adminhtml\System\Config\Form\Field\Wysiwyg</frontend_model>
 </field>
 </group>
 </section>
 </system>
</config>

Create the Wysiwyg.php file in app/code/YourVendor/YourModule/Block/Adminhtml/System/Config/Form/Field/:

<?php
namespace YourVendor\YourModule\Block\Adminhtml\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;
use Magento\Config\Block\System\Config\Form\Field;
class Wysiwyg extends Field
{
 protected function _getElementHtml(AbstractElement $element)
 {
 $element->setWysiwyg(true);
 $element->setConfig($this->_getWysiwygConfig());
 return parent::_getElementHtml($element);
 }
 protected function _getWysiwygConfig()
 {
 $config = new \Magento\Framework\DataObject();
 $config->setData([
 'enabled' => true,
 'hidden' => false,
 'use_container' => true,
 'add_variables' => true,
 'add_widgets' => true,
 'add_images' => true,
 'files_browser_window_url' => $this->_urlBuilder->getUrl('cms/wysiwyg_images/index'),
 ]);
 return $config;
 }
}

Step 3: Add JavaScript to Enable WYSIWYG Create requirejs-config.js in app/code/YourVendor/YourModule/view/adminhtml/:

var config = {
 map: {
 '*': {
 wysiwygSetup: 'YourVendor_YourModule/js/wysiwyg-setup'
 }
 }
};

Create wysiwyg-setup.js in app/code/YourVendor/YourModule/view/adminhtml/web/js/:

define([
 'jquery',
 'mage/adminhtml/wysiwyg/tiny_mce/setup'
], function (,ドル wysiwygSetup) {
 'use strict';
 return function (config) {
 $(document).ready(function () {
 wysiwygSetup(config);
 });
 };
});

Step 4: Update Your system.xml to Use JavaScript Update your system.xml field to include wysiwygSetup:

<field id="your_field" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Your Field Label</label>
 <frontend_model>YourVendor\YourModule\Block\Adminhtml\System\Config\Form\Field\Wysiwyg</frontend_model>
 <frontend_type>wysiwyg</frontend_type>
 <config_path>your_vendor/your_module/your_field</config_path>
</field>

Step 5: Flush Cache After creating these files, flush the Magento cache to make sure your changes are applied:

bin/magento cache:clean
bin/magento cache:flush

Verification Navigate to the Magento admin panel, go to Stores > Configuration, and find your custom section. You should see your dynamic fieldset with the WYSIWYG editor applied to it.

Thank You!