Add wysiwyg editor in Magento Custom Module

editor
In this blog post, we will see how to add wysiwyg editor in magento admin forms.

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.
Error... Unable to load download template. Search single-download-template.tpl in your plugin folder!
So lets start of.

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

<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

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

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

$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.

$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

<admin>
    <routers>
        <editor>
            <use>admin</use>
            <args>
                <module> Excellence_Editor </module>
                <frontName>editor</frontName>
            </args>
        </editor>
    </routers>
</admin>

Becomes:

<admin>
        <routers>
            <adminhtml>
                <args>
                    <modules>
                        <Excellence_Editor_Adminhtml before="Mage_Adminhtml">Excellence_Editor_Adminhtml</Excellence_Editor_Adminhtml>
                    </modules>
                </args>
            </adminhtml>
        </routers>
    </admin>

And:

<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:

  <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

<editor_adminhtml_editor_index>
    <reference name="content">
        <block type="editor/adminhtml_editor" name="editor" />
    </reference>
</editor_adminhtml_editor_index >

Becomes:

    <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.

  • http://www.facebook.com/hugues.masy Hugues Masy

    Many Thanks Manish ! Reading your excellent tutorial raised a collateral question: can the wysiwyg editor easily be used on frontend pages ? And if yes, how ? :-)

    • Manish Prakash

      Hi Hugues,
      Yes we can use wysiwyg on frontend pages. I’ll try to write post for that as soon as i got time.

      :)

      • Luke_Barker

        hey Manish can you fix the syntax of the code on your blogs – they are all getting php htmlentities or something!

      • Vishal

        Have you post blog of Use Wysiwyg on frontend pages. if you then provide us url.

  • Yuriy

    First step can be replaced with i think

  • Rafael Ortega Bueno

    For those who have problems with the path of the image :)

    $wysiwygConfig = Mage::getSingleton(‘cms/wysiwyg_config’)->getConfig(array(‘add_variables’ => false, ‘add_widgets’ => false,’files_browser_window_url’=>$this->getBaseUrl().’admin/cms_wysiwyg_images/index/’));

    $fieldset->addField(‘contents’, ‘editor’, array(

    ‘name’ => ‘contents’,

    ‘label’ => $this->__(‘Content’),

    ‘title’ => $this->__(‘Content’),

    ‘style’ => ‘height:36em;’,

    ‘config’ => $wysiwygConfig,

    ‘required’ => true,

    ‘wysiwyg’ => true

    ));