Add wysiwyg editor in Magento Custom Module

**shunavi** · 28-12-2013, 07:16 PM

First of all, if you don't have time to do these steps you can download the module in attachment.

This is very and well known problem for every magento developer. So here is a simple solution for this problem Step by step explained. We need create a magento module for this purpose, but it is not necessary. Attached is the source files of magento module created.

Now, let 's start

Step 1: Add necessary js and css files for wysiwyg editor in your module

Add necessary js and css files in app/design/frontend/default/default/layout/editor.xml

HTML Code:

<default> 

            <reference name="head"> 

            <action method="setCanLoadExtJs"><flag>1</flag></action> 

            <action method="setCanLoadTinyMce"><flag>1</flag></action>

            <action method="addJs"><script>mage/adminhtml/variables.js</script></action> 

            <action method="addJs"><script>mage/adminhtml/wysiwyg/widget.js</script></action> 

            <action method="addJs"><script>lib/flex.js</script></action> 

            <action method="addJs"><script>lib/FABridge.js</script></action> 

            <action method="addJs"><script>mage/adminhtml/flexuploader.js</script></action> 

            <action method="addJs"><script>mage/adminhtml/browser.js</script></action> 

            <action method="addJs"><script>prototype/window.js</script></action>

            <action method="addJs"><script>prototype/prototype.js</script></action> 

            <action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action> 

            <action method="addItem"><type>js_css</type><name>prototype/windows/themes/magento.css</name></action>

            </reference> 

    </default>

Step 2: Code to create wysiwyg editor

Go to [app/code/local/YOUR_NAMESPACE/MODULE_NAME/block/Adminhtml/Editor/Edit/Tab/Form.php] and under your _prepareLayout() function add this code

PHP Code:


protected function _prepareLayout()



    {



        $return = parent::_prepareLayout();



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



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



        }



        return $return;



    }

Now in your _prepareForm() function add this code to create wysiwyg editor

PHP Code:


protected function _prepareForm()



{



---



 



$fieldset->addField('contents', 'editor', 



                        array (



                        'name' => 'contents', 



                        'label' => Mage::helper('editor')->__('Content'), 



                        'title' => Mage::helper('editor')->__('Content'), 



                        'style' => 'height:36em;',



                        'config'    => Mage::getSingleton('cms/wysiwyg_config')->getConfig(),



                        'required' => true ));



 



                ---



                }

That’s it this will create a wysiwyg editor in your admin custom module.
Now let us see the explanation of the above code

PHP Code:


$return = parent::_prepareLayout();



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



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



        }



        return $return;

this code will check if the wysiwyg is enabled in admin if enabled then it will load the TinyMice Js.

PHP Code:


$fieldset->addField('contents', 'editor', 



                        array (



                        'name' => 'contents', 



                        'label' => Mage::helper('editor')->__('Content'), 



                        'title' => Mage::helper('editor')->__('Content'), 



                        'style' => 'height:36em;',



                        'config'    => Mage::getSingleton('cms/wysiwyg_config')->getConfig(),



                        'required' => true ));

From this code the editor is been created. In this in the first line it is telling to add a field of type editor which has name contents .
The line ‘config’ => Mage::getSingleton(‘cms/wysiwyg_config’)->getConfig(),

will load the config for wysiwyg editor and your editor will be created.
But it will not work for now. To make it work you need to make some changes. You need to rewrite your module’s adminurl to make your wysiwyg editor work.

Step 3: Rewriting our module admin url in config.xml

So first we need to create module which will create forms in admin as we have described In our “Admin Module Development”.
Now in your module’s config.xml Replace the admin route with an injection of your module into the existing adminhtml route.
app/code/local/Excllence/Editor/etc/config.xml

HTML Code:

<admin>

    <routers>

        <editor>

            <use>admin</use>

            <args>

                <module> Excellence_Editor </module>

                <frontName>editor</frontName>

            </args>

        </editor>

    </routers>

</admin>

Becomes:

HTML Code:

<admin>

        <routers>

            <adminhtml>

                <args>

                    <modules>

                        <Excellence_Editor_Adminhtml before="Mage_Adminhtml">Excellence_Editor_Adminhtml</Excellence_Editor_Adminhtml>

                    </modules>

                </args>

            </adminhtml>

        </routers>

    </admin>

And:

HTML Code:

<adminhtml>

    <menu>

        <editor module=" editor ">

             <title>Editor</title>

             <sort_order>99</sort_order>

             <children>

                 <add module=" editor ">

                     <title>Manage Items</title>

                     <sort_order>0</sort_order>

                     <action>editor/adminhtml_editor</action>

                </add>

                ...

            </children>

        </editor>

    </menu>

</adminhtml>

Becomes:

HTML Code:

<adminhtml>       

      <menu>

          <editor module="editor">

              <title>Editor</title>

              <sort_order>99</sort_order>               

              <children>

                  <items module="editor">

                      <title>Manage Items</title>

                      <sort_order>0</sort_order>

                      <action>adminhtml/editor/</action>

                  </items>

              </children>

          </editor>

      </menu>        

 

   ---        

  </adminhtml>

Step 4: Rewriting our module admin url in editor.xml

And in app/design/frontend/default/default/layout/editor.xml

HTML Code:

<editor_adminhtml_editor_index>

    <reference name="content">

        <block type="editor/adminhtml_editor" name="editor" />

    </reference>

</editor_adminhtml_editor_index >

Becomes:

HTML Code:

<adminhtml_editor_index>

    <update handle="editor_index_index"/>

    <reference name="content">

        <block type="editor/adminhtml_editor" name="myadmin" />

    </reference>

</adminhtml_editor_index>

Now our admin url rewriting is been done..
Now our wysiwyg editor will work now.