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-by-Step Guide to Enabling WYSIWYG Editor in Magento Backend
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.
->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’)