2

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

1

1 Answer 1

2

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 :-)

3
  • I have just tried your code and the editor appears +1 but the insert image and variable don't work. Any ideas?
    – Garry
    Aug 2, 2018 at 20:00
  • MagentoCmsModelTemplateFilterProvider $filterProvider $content = ‘{{media url=”wysiwyg/some_image.jpg”}}’; $contentGenerating = $this->_filterProvider->getPageFilter()->filter($content); echo $contentGenerating; //Generate HTML
    – Divyesh
    Aug 3, 2018 at 5:11
  • @Divyesh could you update your code with answer provided in the comment
    – aravind
    Dec 4, 2019 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.