How to add WYSIWYG editor with textarea in the admin system configuration options?
Rafael Corrêa Gomes
13.9k15 gold badges92 silver badges190 bronze badges
asked May 9, 2018 at 7:01
Prashant Patel
1,29711 silver badges22 bronze badges
2 Answers 2
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);
}
}
Finally, to allow the "Insert Variable" feature to work correctly, create a new adminhtml_system_config_edit.xml file at app/code/NameSpace/ModuleName/view/adminhtml/layout folder:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link src="Magento_Backend::js/bootstrap/editor.js"/>
</head>
</page>
Note that, to prevent the left panel from disappearing, we have only added the required editor.js file, rather than updating the editor handle.
Please let me know if you find any problem.
Tu Van
8,3812 gold badges15 silver badges26 bronze badges
answered May 9, 2018 at 7:05
Mohit Kumar Arora
10.2k7 gold badges29 silver badges57 bronze badges
-
It almost works fine. But "Insert Variable" button doesn't work. It throws error: "Uncaught ReferenceError: MagentovariablePlugin is not defined"Roman Snitko– Roman Snitko2018年05月27日 11:53:06 +00:00Commented May 27, 2018 at 11:53
-
Try below link : magento.stackexchange.com/questions/175981/…Pradeep Thakur– Pradeep Thakur2019年02月22日 08:29:20 +00:00Commented Feb 22, 2019 at 8:29
-
How did you fixed that issue @Roman snitkoaravind– aravind2019年12月04日 14:04:07 +00:00Commented Dec 4, 2019 at 14:04
-
I am also facing the same issue..aravind– aravind2019年12月04日 14:27:19 +00:00Commented Dec 4, 2019 at 14:27
-
@aravind I didn't go more in-depth and removed that button.Roman Snitko– Roman Snitko2019年12月04日 15:54:40 +00:00Commented Dec 4, 2019 at 15:54
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);
}
}
answered May 9, 2018 at 7:06
Chandra Kumar
6233 gold badges11 silver badges28 bronze badges
default