Add wysiwyg editor (TinyMCE) in Magento Custom Module.
Created: February 2, 2017
Last updated: April 20, 2022
In this short blog post I'm going to go through the steps on how to add a wysiwyg(TinyMCE) to a custom magento module form.
In the file app/code/local/{{module}}/{{module_name}}/Block/Adminhtml/Edit/Tab/Form.php
which extends
Mage_Adminhtml_Block_Widget_Form
add the following method:
/**
* Load Wysiwyg on demand and Prepare layout
*/
protected function _prepareLayout() {
parent::_prepareLayout();
if (Mage::getSingleton('cms/wysiwyg_config')->isEnabled()) {
$this->getLayout()->getBlock('head')->setCanLoadTinyMce(true);
$this->getLayout()->getBlock('head')->setCanLoadExtJs(true);
}
}
This allows the tinyMce setup script to be added to the page. Now in your _prepareForm()
method add your new wysiwyg field.
$fieldset->addField("long_description", "editor", array(
"label" => Mage::helper("adminhtml")->__("Long Description"),
"class" => "required-entry",
"required" => true,
"style" => "height:30em",
"name" => "long_description",
"config" => Mage::getSingleton('cms/wysiwyg_config')->getConfig(),
"wysiwyg" => true,
));
You can pass parameters to adjust the cms/wysiqyg_config
@see Mage_Cms_Model_Wysiwyg_Config
on line 112:
if (is_array($data)) {
$config->addData($data);
}
Next we need to add the the rest of the wysiwyg js files. To do this we are going to update our layout handle to use the editor
layout handle.
If you look at app/design/adminhtml/default/default/layout/main.xml
under the editor
layout handle you should be able to see that it adds all the relevant js and css files for the wysiwyg to work e.g: <action method="addJs"><script>mage/adminhtml/wysiwyg/widget.js</script></action>
To add this to our custom module page we are going to add out own adminhtml
layout file. In your module config file
app/code/local/{{module}}/{{module_name}}/etc/config.xml
we add the following:
<adminhtml>
<layout>
<updates>
<module_name>
<file>module_name.xml</file>
</module_name>
</updates>
</layout>
</adminhtml>
One you have created this file under app/design/adminhtml/default/default/layout/module_name.xml
you can add the following:
<layout>
<adminhtml_module_edit>
<update handle="editor" />
</adminhtml_module_edit>
</layout>
And that's it your wysiwyg should now be working on your custom field!