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.

How to create admin Custom System Configuration Textarea field with wysiwyg editor enabled in Magento How to create admin Custom System Configuration Textarea field with wysiwyg editor enabled in Magento Reviewed by Pranay Gondane on 4:13:00 AM Rating: 5

No comments

Free! Free!Free! Subscribe to Get Free PHP (Magento) tutorial Update in Your Inbox!!! Hurry Up!!!