Read More
Read More
Menu Close

    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="" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
            <section id="yoursectionid" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Custom Label</label>
                <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>
                    <!-- WYSIWYG editor field code end-->

    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

    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
            // set configuration values 
            return parent::_getElementHtml($element);

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

    Searching for an experienced
    Magento 2 Company ?
    Read More

    thanks 🙂

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


  • 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á
  • 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