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.

Go to: app/code/local/[your_name_space]/[your_module]/Block/Adminhtml/[your_block]/Edit/Tabs/Form.php

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

Go to: app/code/local/[your_name_space]/[your_module]/controllers/Adminhtml/[controller_name]Controller.php

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

Go to: app/design/adminhtml/default/default/layout.xml

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

Have you done yours?

The weather is so hot these days so I am about to go swimming now.

Remember to leave your comments below if you have any ideas. I’ll get back soon.

Bye bye!