Steps to add WYSIWYG editor to Magento backend

In thia article, we are going to discuss about steps to add WYSIWYG editor in Magento admin backend. WYSIWYG editor is a tool that helps easily format or edit text or html code as you want. By adding WYSIWYG editor to your backend, you will have a visual editor rather than dealing with all code.

However, this task seems not as simple as adding other fields. It requires inserting some javascript and css files to make the editor work. Thus this post may be a good resource for you. Just keep on reading and follow the steps below to learn how to add WYSIWYG editor to Magento backend.

Step 1 : Enable WYSIWYG editor in your field

Open the file "app/code/local/[your_name_space]/[your_module]/Block/Adminhtml/[your_block]/Edit/Tabs/Form.php" and add the below codes.

$fieldset->addField('description', 'editor', array(
'label' => Mage::helper('customerreward')->__('Description'),
'title' => Mage::helper('customerreward')->__('Description'),
'class' => 'required-entry',
'required' => true,
'name' => 'description',
'wysiwyg' => true,// enable WYSIWYG editor
));

Step 2: Add js and css files to controller action

You can follow either of these ways:

Step 2.1 : Use PHP code in your controller action:

Open the file "app/code/local/[your_name_space]/[your_module]/controllers/Adminhtml/[controller_name]Controller.php" add the below codes.

$this->getLayout()->getBlock('head')
->setCanLoadExtJs(true)
->setCanLoadTinyMce(true)
->addItem('js','tiny_mce/tiny_mce.js')
->addItem('js','mage/adminhtml/wysiwyg/tiny_mce/setup.js')
->addJs('mage/adminhtml/browser.js')
->addJs('prototype/window.js')
->addJs('lib/flex.js')
->addJs('mage/adminhtml/flexuploader.js')
->addItem('js_css','prototype/windows/themes/default.css')
->addItem('js_css','prototype/windows/themes/magento.css');

Step 2.2 : Use layout file:

Open the file "app/design/adminhtml/default/default/layout.xml" and add the below codes

<referencename="head">
<actionmethod="setCanLoadExtJs"><flag>1</flag></action>
<actionmethod="setCanLoadTinyMce"><flag>1</flag></action>
<actionmethod="addJs"><script>lib/flex.js</script></action> 
<actionmethod="addJs"><script>mage/adminhtml/flexuploader.js</script></action>
<actionmethod="addJs"><script>mage/adminhtml/browser.js</script></action>
<actionmethod="addJs"><script>prototype/window.js</script></action>
<actionmethod="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
<actionmethod="addItem"><type>js_css</type><name>prototype/windows/themes/magento.css</name></action>
<actionmethod="addItem"><type>js</type><name>mage/adminhtml/wysiwyg/tiny_mce/setup.js</name><params/></action>
<actionmethod="addItem"><type>js</type><name>tiny_mce/tiny_mce.js</name><params/></action>
</reference>

Now, you can view this form shown in your Magento admin backend.