Engine23

Custom Module with image upload in wysiwyg

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

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

and find function protected function _prepareForm()
and add

$form->setHtmlIdPrefix(‘modulename’);
$wysiwygConfig = Mage::getSingleton(‘cms/wysiwyg_config’)->getConfig(
array(‘tab_id’ => ‘form_section’)
);

And add field property

$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);
$fieldset->addField(‘fieldname’, ‘editor’, array(
‘name’ => ‘fieldname’,
‘label’ => Mage::helper(‘modulename’)->__(‘Content’),
‘title’ => Mage::helper(‘modulename’)->__(‘Content’),
‘style’ => ‘width:700px; height:300px;’,
‘wysiwyg’ => true,
‘required’ => false,
‘state’ => ‘html’,
‘config’ => $wysiwygConfig,
));

step-3
Go to following path and open modulename.xml if its not available than create id
app\design\adminhtml\default\default\layout

and add

<?xml version=”1.0″?>
<layout>
<modulename_adminhtml_controllername_index>
<reference name=”content”>
<block type=”modulename/adminhtml_blockname” name=”blockname” />
</reference>
</modulename_adminhtml_controllername_index>
<modulename_adminhtml_controllername_edit>
<update handle=”editor”/>
</modulename_adminhtml_controllername_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']);

 

In the Block to turn the https://www.engine23.com/media/wysiwyg/add_note.jpg into the image, you need to add:

    public function _toHtml()
    {
        $processor = Mage::getModel('core/email_template_filter');
        return $processor->filter(parent::_toHtml());
    }

Share: