How to create admin Custom System Configuration Textarea field with wysiwyg editor enabled in Magento

We are going to create a custom module for above functionality, follows the below steps one by one.

Declaration: 
Namespace Name: Pg
Module Name: Adminconfigeditor

Step1: Create Pg_Adminconfigeditor.xml file and add in below path: app\etc\modules

 
      
<?xml version="1.0"?>

<config>

    <modules>

        <Pg_Adminconfigeditor>

            <active>true</active>

            <codePool>local</codePool>

        </Pg_Adminconfigeditor>

    </modules>

</config>


      

 

Step2: Create IndexController.php file and add in below path: app\code\local\Pg\Adminconfigeditor\controllers

 
      
<?php



class Pg_Adminconfigeditor_IndexController extends Mage_Core_Controller_Front_Action {



    public function indexAction() {

  

    }



}


      

 

Step3: Create Editor.php file and add in below path: app\code\local\Pg\Adminconfigeditor\Block\Adminhtml\System\Config\Editor.php

 
      
<?php

 class Pg_Adminconfigeditor_Block_Adminhtml_System_Config_Editor

    extends Mage_Adminhtml_Block_System_Config_Form_Field

    implements Varien_Data_Form_Element_Renderer_Interface {



 protected function _prepareLayout() {

   parent::_prepareLayout();

   if (Mage::getSingleton('cms/wysiwyg_config')->isEnabled()) {

    $this->getLayout()->getBlock('head')->setCanLoadTinyMce(true);

   }

 }

    protected function _getElementHtml(Varien_Data_Form_Element_Abstract $element) {

        $element->setWysiwyg(true);

        $element->setConfig(Mage::getSingleton('cms/wysiwyg_config')->getConfig());

        return parent::_getElementHtml($element);

    }

}


      

 

Step4: Create Data.php file and add in below path: app\code\local\Pg\Adminconfigeditor\Helper\Data.php

 
      
<?php

class Pg_Adminconfigeditor_Helper_Data extends Mage_Core_Helper_Abstract

{

}

      

 

Step5: Create config.xml file and add in below path: app\code\local\Pg\Adminconfigeditor\etc\config.xml

 
      
<?xml version="1.0"?>

<config>

    <modules>

        <Pg_Adminconfigeditor>

            <version>0.1.0</version>

        </Pg_Adminconfigeditor>

    </modules>

    <frontend>  

        <routers>

            <adminconfigeditor>

                <use>standard</use>

                <args>

                    <module>Pg_Adminconfigeditor</module>

                    <frontName>adminconfigeditor</frontName>

                </args>

            </adminconfigeditor>

        </routers>       

    </frontend>

    <global>               

        <blocks>

            <adminconfigeditor>

                <class>Pg_Adminconfigeditor_Block</class>

            </adminconfigeditor>

        </blocks>

        <helpers>

            <adminconfigeditor>

                <class>Pg_Adminconfigeditor_Helper</class>

            </adminconfigeditor>         

        </helpers>           

    </global>

 <adminhtml>

  <acl>

   <resources>

    <all>

     <title>Allow Everything</title>

    </all>

    <admin>

     <children>

      <system>

       <children>

        <config>

         <children>

          <pg_section>

           <title>PG - All</title>

          </pg_section>

         </children>

        </config>

       </children>

      </system>

     </children>

    </admin>

   </resources>

  </acl>

 </adminhtml>   

</config>

      

 

Step6: Create system.xml file and add in below path: app\code\local\Pg\Adminconfigeditor\etc\system.xml

 
      
<?xml version="1.0" encoding="UTF-8"?>

<config>

    <tabs>

        <pg translate="label" module="adminconfigeditor">

            <label>Pg Admin Config Editor</label>

            <sort_order>100</sort_order>

        </pg>

    </tabs>

    <sections>

        <pg_section translate="label" module="adminconfigeditor">

            <label>Extension Options</label>

            <tab>pg</tab>

            <sort_order>1000</sort_order>

            <show_in_default>1</show_in_default>

            <show_in_website>1</show_in_website>

            <show_in_store>1</show_in_store>

            <groups>

                <pg_group translate="label" module="adminconfigeditor">

                    <label>My Extension Options</label>

                    <frontend_type>text</frontend_type>

                    <sort_order>1000</sort_order>

                    <show_in_default>1</show_in_default>

                    <show_in_website>1</show_in_website>

                    <show_in_store>1</show_in_store>

                    <fields>

                        <pg_input translate="label">

                            <label>My Input Field: </label>

                            <comment>My Comment</comment>

                            <frontend_type>text</frontend_type>

                            <sort_order>20</sort_order>

                            <show_in_default>1</show_in_default>

                            <show_in_website>1</show_in_website>

                            <show_in_store>1</show_in_store>

                        </pg_input>

                        <pg_select translate="label">

                            <label>My Dropdown: </label>

                            <comment>Test Comment</comment>

                            <frontend_type>select</frontend_type>

                            <sort_order>90</sort_order>

                            <show_in_default>1</show_in_default>

                            <show_in_website>1</show_in_website>

                            <show_in_store>1</show_in_store>

                            <source_model>adminhtml/system_config_source_yesno</source_model>

                        </pg_select>

      <pg_textarea_wysiwyg>

          <label>Wysiwyg Textarea Example</label>

          <frontend_type>editor</frontend_type>

          <frontend_model>adminconfigeditor/adminhtml_system_config_editor</frontend_model>

          <sort_order>120</sort_order>

          <show_in_default>1</show_in_default>

          <show_in_website>1</show_in_website>

          <show_in_store>1</show_in_store>

          <comment>Textarea field with wysiwyg editor enabled.</comment>

      </pg_textarea_wysiwyg>

                    </fields>

                </pg_group>

            </groups>

        </pg_section>

    </sections>

</config>


      

 

Step7: Done. Go to admin system configuration, you should see the below screen. Note: Clear cache and make sure you have enabled wysiwyg setting from admin -> system->config->content management.