Magento Expert Forum - Improve your Magento experience

Results 1 to 1 of 1

Add wysiwyg editor in Magento Custom Module

  1. #1
    Moderator shunavi's Avatar
    Join Date
    Mar 2013
    Posts
    130
    Thanks
    10
    Thanked 29 Times in 15 Posts

    Thumbs up Add wysiwyg editor in Magento Custom Module

    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.

    View more threads in the same category:

    Attached files Attached files

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •