Skip to content

Magento 2: Add Wysiwyg to dynamic fields in System Configuration

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>G4AObstructiveSleepApneaBlockAdminhtmlSystemConfigFormFieldEditor</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>G4AObstructiveSleepApneaBlockAdminhtmlFormFieldDiagnosisList</frontend_model>
                <backend_model>MagentoConfigModelConfigBackendSerializedArraySerialized</backend_model>
            </field>
        </group>
<?php
namespace G4AObstructiveSleepApneaBlockAdminhtmlFormField;

use MagentoConfigBlockSystemConfigFormFieldFieldArrayAbstractFieldArray;
use MagentoBackendBlockTemplateContext;
use MagentoCmsModelWysiwygConfig as WysiwygConfig;
use PsrLogLoggerInterface;

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(
                'G4AObstructiveSleepApneaBlockAdminhtmlSystemConfigFormFieldEditor',
                //'G4AObstructiveSleepApneaBlockAdminhtmlSystemConfigFormFieldWysiwyg',
                '',
                ['data' => ['is_render_to_js_template' => true]]
            );
        }
        //MagentoFrameworkAppObjectManager::getInstance()->get('PsrLogLoggerInterface')->info(print_r($this->_wysiwygRenderer , true));
        return $this->_wysiwygRenderer;
    }


}
<?php
namespace G4AObstructiveSleepApneaBlockAdminhtmlSystemConfigFormField;

use MagentoBackendBlockTemplateContext;
use MagentoCmsModelWysiwygConfig as WysiwygConfig;
use MagentoConfigBlockSystemConfigFormField as FormFIeld;
use MagentoFrameworkDataFormElementAbstractElement;

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()]);
        //MagentoFrameworkAppObjectManager::getInstance()->get('PsrLogLoggerInterface')->info(print_r($config, true));
        $element->setConfig($config);
        return parent::_getElementHtml($element);
    }

}

enter image description here

Any hint is apreciated.