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>


Now reload your page really cool wysiwyg Editor Dispaly
Note: that this code was tested in Magento Version 1.6.1.0 and 1.7.1.0
Happy Editing!

10 comments:

  1. PLZ HELP ME urgent.....its not working

    app/code/local/Digitalnet/Rob/Block/Adminhtml/Rob/Edit.php
    ================================================================
    isEnabled() && ($block = $this->getLayout()->getBlock('head'))) {
    $block->setCanLoadTinyMce(true);
    }
    parent::_prepareLayout();
    }

    }

    ?>
    ============================================
    app/code/local/Digitalnet/Rob/Block/Adminhtml/Rob/Edit/Tab/Form.php
    ============================================
    setForm($form);

    $form->setHtmlIdPrefix('rob');
    $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);



    $fieldset->addField('description', 'editor', array(
    'name' => 'description',
    'label' => Mage::helper('rob')->__('Content'),
    'title' => Mage::helper('rob')->__('Content'),
    'style' => 'width:700px; height:500px;',
    'wysiwyg' => true,
    'required' => true,
    'state' => 'html',
    'config' => $wysiwygConfig,
    ));

    }

    }
    ?>
    ==============================================
    app\design\adminhtml\default\default\layout\rob.xml
    ==============================================






    =====================================
    now my phtml file path
    app/code/local/Digitalnet/Rob/templates/Adminhtml/addbook.phtml
    ==============its textarea code=(html code)=================

    $_cmsHelper = Mage::helper('cms');
    $_process = $_cmsHelper->getBlockTemplateProcessor();
    echo $_process->filter($item['description']);

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. its not show i don't know......rob_adminhtml_rob_edit

      Delete
  3. I had troubles with implementing my custom module wysiwyg editor, with links not being decoded on the frontend and your final code part fixed that for me.

    Just for the sake of consistency: in your demonstration code, at step 3 it should obviously be 'mynamespace_adminhtml_mymodule_edit' rather than 'news_adminhtml_news_edit'.

    Thanks again for sharing!

    ReplyDelete
    Replies
    1. Hmm, I meant 'mymodule_adminhtml_mymodule_edit'

      Delete
  4. Thanks
    It is working fine for me.

    Great post.

    ReplyDelete
  5. Thanks for the best blog.it was very useful for me.keep sharing such ideas in the future as well.this was actually what i was looking for,and i am glad to came here!
    magento development company in bangalore 

    ReplyDelete
  6. Thanks
    It is working fine for me.

    ReplyDelete