How to add WYSIWYG editor to a field in back-end

I think all you guys are familiar with WYSIWYG editor which helps easily format or edit your text and page layout as you want. Sometimes you need to add the WYSIWYG editor to your field form in the backend. However, this task seems not as simple as adding other fields. It requires inserting some javascript and css files to make your editor work. Thus this post may be a good reference for you. Just read on and follow steps below:

• Step 1: Enable WYSIWYG editor in your field.

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

Use PHP code in your controller action:

$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');

Use layout file:

<referencename="head">
<actionmethod="setCanLoadExtJs"><flag>1</flag></action>
<action method="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 backend like this: