Magento 2 – How to add WYSIWYG editor in admin configuration options?

Question

How to add WYSIWYG editor with textarea in the admin system configuration options?

Answer 1

Open your module system.xml from app/code/NameSpace/ModuleName/etc/adminhtml and add following code:

<?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>

Now create the editor class file Editor.php at app/code/NameSpace/ModuleName/Block/Adminhtml/System/Config folder where we create the WYSIWYG-Editor element:

<?php
namespace NameSpace\ModuleName\Block\Adminhtml\System\Config;

use Magento\Backend\Block\Template\Context;
use Magento\Cms\Model\Wysiwyg\Config as WysiwygConfig;
use Magento\Config\Block\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;

class Editor extends Field
{
    protected $_wysiwygConfig;

    /**
     * Editor constructor.
     * @param Context $context
     * @param WysiwygConfig $wysiwygConfig
     * @param array $data
     * @codeCoverageIgnore
     */
    public function __construct(
        Context $context,
        WysiwygConfig $wysiwygConfig,
        array $data = []
    ) {
        $this->_wysiwygConfig = $wysiwygConfig;
        parent::__construct($context, $data);
    }

    protected function _getElementHtml(AbstractElement $element)
    {
        // set wysiwyg for element
        $element->setWysiwyg(true);

        // set configuration values
        $element->setConfig($this->_wysiwygConfig->getConfig());

        return parent::_getElementHtml($element);
    }
}

Please let me know if you find any problem.

Answer 2

Use this code:

Step 1:

Create your system.xml under

app/code/[Name_Space]/[Your_Module]/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>[Name_Space]_[Your_Module]::config_[your_module]</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>[Name_Space]\[Your_Module]\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 under

app/code/[Name_Space]/[Your_Module]/Block/Adminhtml/System/Config

folder where we create WYSIWYG editor element

<?php

namespace [Name_Space]\[Your_Module]\Block\Adminhtml\System\Config;

use Magento\Backend\Block\Template\Context;
use Magento\Cms\Model\Wysiwyg\Config as WysiwygConfig;
use Magento\Config\Block\System\Config\Form\Field;

class Editor extends Field
{
    /**
     * @var WysiwygConfig
     */
    private $wysiwygConfig;

    /**
     * Editor constructor.
     * @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);
    }
}