3

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

2 Answers 2

3

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.

5
  • It almost works fine. But "Insert Variable" button doesn't work. It throws error: "Uncaught ReferenceError: MagentovariablePlugin is not defined" May 27, 2018 at 11:53
  • Try below link : magento.stackexchange.com/questions/175981/… Feb 22, 2019 at 8:29
  • How did you fixed that issue @Roman snitko
    – aravind
    Dec 4, 2019 at 14:04
  • I am also facing the same issue..
    – aravind
    Dec 4, 2019 at 14:27
  • @aravind I didn't go more in-depth and removed that button. Dec 4, 2019 at 15:54
1

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);
    }
}

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.