Skip to content

Magento : Add WYSIWYG Editor in Custom Module

step-1

Go to following path and open Edit.php
app\code\local\Namespace\Modulename\Block\Adminhtml\Modulename\Edit.php
and Add this Function
protected function _prepareLayout()
{
 // Load Wysiwyg on demand and Prepare layout
 if (Mage::getSingleton(‘cms/wysiwyg_config’)->isEnabled() && ($block = $this->getLayout()->getBlock(‘head’))) {
 $block->setCanLoadTinyMce(true);
 }
 parent::_prepareLayout();
 }
step-2
Go to following path and open Form.php
app\code\local\Namespace\Modulename\Block\Adminhtml\Modulename\Edit\Tab\Form.php
and find function protected function_prepareForm() and add
$form = new Varien_Data_Form();
$this->setForm($form);
$form->setHtmlIdPrefix(‘yourmodulename’);
$wysiwygConfig = Mage::getSingleton(‘cms/wysiwyg_config’)->getConfig(array(‘tab_id’ => ‘form_section’));
$wysiwygConfig[“files_browser_window_url”] = Mage::getSingleton(‘adminhtml/url’)->getUrl(‘adminhtml/cms_wysiwyg_images/index’);
$wysiwygConfig[“directives_url”] = Mage::getSingleton(‘adminhtml/url’)->getUrl(‘adminhtml/cms_wysiwyg/directive’);
$wysiwygConfig[“directives_url_quoted”] = Mage::getSingleton(‘adminhtml/url’)->getUrl(‘adminhtml/cms_wysiwyg/directive’);
$wysiwygConfig[“widget_window_url”] = Mage::getSingleton(‘adminhtml/url’)->getUrl(‘adminhtml/widget/index’);
$wysiwygConfig[“files_browser_window_width”] = (int) Mage::getConfig()->getNode(‘adminhtml/cms/browser/window_width’);
$wysiwygConfig[“files_browser_window_height”] = (int) Mage::getConfig()->getNode(‘adminhtml/cms/browser/window_height’);
$plugins = $wysiwygConfig->getData(“plugins”);
$plugins[0][“options”][“url”] = Mage::getSingleton(‘adminhtml/url’)->getUrl(‘adminhtml/system_variable/wysiwygPlugin’);
$plugins[0][“options”][“onclick”][“subject”] = “MagentovariablePlugin.loadChooser(‘”.Mage::getSingleton(‘adminhtml/url’)->getUrl(‘adminhtml/system_variable/wysiwygPlugin’).”‘, ‘{{html_id}}’);”;
$plugins = $wysiwygConfig->setData(“plugins”,$plugins);
and add this code to display wysiwyg editor
$fieldset->addField(‘content’, ‘editor’, array(
‘name’ => ‘content’,
‘label’ => Mage::helper(‘news’)->__(‘Content’),
‘title’ => Mage::helper(‘news’)->__(‘Content’),
‘style’ => ‘width:700px; height:500px;’,
‘wysiwyg’ => true,
‘required’ => true,
‘state’ => ‘html’,
            ‘config’ => $wysiwygConfig,
));
step-3
Go to following path and open yourmodulename.xml if its not available than create xml file
app\design\adminhtml\default\default\layout\yourmodulename.xml
and add
<?xml version=”1.0″?>
<layout>
  <news_adminhtml_news_edit>
    <update handle=”editor”/>
  </news_adminhtml_news_edit>
</layout>
step-4
if you have get content of editor in front end use this code
$_cmsHelper = Mage::helper(‘cms’);
$_process = $_cmsHelper->getBlockTemplateProcessor();
echo $_process->filter($item[‘content’]);
addtional step, if still not working, on layout configuration, add following config
<news_adminhtml_news_edit>
  <update handle="editor"/>
  <reference name="head">
    <action method="addJs"><script>mage/adminhtml/wysiwyg/tiny_mce/setup.js</script></action>
    <action method="addJs"><script>tiny_mce/tiny_mce.js</script></action>
  </reference>
</news_adminhtml_news_edit>

 

Share

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *