Menu Close
    Searching for an experienced Magento 2 Development Company ?

    Add WYSIWYG Editor In Magento2 Configuration Section

    Here we learn how to add WYSIWYG editor in Magento2 configuration section

    Step1# open your module system.xml from app/code/NameSpace/ModuleName/etc/adminhtml

    and add following code in it

    <?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\Adminhtml\System\Config;
     
    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);
        }
    }

    step 3# Now in your admin section you get this WYSIWYG Editor element as following

    Editor

    thanks 🙂

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    8 comments

  • Purushotam Sharma
    Can we add wysiwyg editor on frontend text are box?
    • Webkul Support
      Sure you can will try to add a blog on it in next update
  • Logan Stellway
    Awesome 🙂
  • Rodrigo Alcará
    Thanks!
  • Rohit
    One issue i found after adding wysiwyg editor on my local setup,
    I found that insert variable is not working it showing me js error,
    other things works perfectly thanks, for the post
    • Kriver Kriver
      MagentoCmsModelTemplateFilterProvider $filterProvider

      $content = ‘{{media url=”wysiwyg/some_image.jpg”}}’;
      $contentGenerating = $this->_filterProvider->getPageFilter()->filter($content);
      echo $contentGenerating; //Generate HTML

      • ptsdemo pts
        How is this related to the Insert variable issue.?
    • ptsdemo pts
      Same issue. did anyone found solution.
  • Back to Top