Latest Posts:
Search for:
Magento

How to add WYSIWYG editor to a field in back-end

By

I think all you guys are familiar with WYSIWYG editor which helps easily format or edit your text and page layout as you want. Sometimes you need to add the WYSIWYG editor to your field form in the backend. However, this task seems not as simple as adding other fields. It requires inserting some javascript and css files to make your editor work. Thus this post may be a good reference for you. Just read on and follow steps below:

• 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. You can follow either of these ways:

  • Use PHP code in your 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');
  • Use layout file:

Go to: app/design/adminhtml/default/default/layout.xml

<referencename="head">
<actionmethod="setCanLoadExtJs"><flag>1</flag></action>
<action method="setCanLoadTinyMce"><flag>1</flag></action>
<actionmethod="addJs"><script>lib/flex.js</script></action>
<actionmethod="addJs"><script>mage/adminhtml/flexuploader.js</script></action>
<actionmethod="addJs"><script>mage/adminhtml/browser.js</script></action>
<actionmethod="addJs"><script>prototype/window.js</script></action>
<actionmethod="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
<actionmethod="addItem"><type>js_css</type><name>prototype/windows/themes/magento.css</name></action>
<actionmethod="addItem"><type>js</type><name>mage/adminhtml/wysiwyg/tiny_mce/setup.js</name><params/></action>
<actionmethod="addItem"><type>js</type><name>tiny_mce/tiny_mce.js</name><params/></action>
</reference>

Now, you can view this form shown in your backend like this:

Have you done yours?

The weather is so hot these days so I am about to go swimming now.

Remember to leave your comments below if you have any ideas. I’ll get back soon.

Bye bye!

Author

Why Magestore? We believe in building a meaningful & long-term relationship with you.

Related Posts

4 Comments

  1. Andy Reply

    Thanks for this tutorial, works well.

    How can i activate the variavbles and widgets for the editor?

    • David Reply

      Hi Andy,
      To activate the variables and widgets for the editor, you can use the code paragraph below:
      $wysiwygConfig = Mage::getSingleton(‘cms/wysiwyg_config’)->getConfig();
      $wysiwygConfig->addData(array(
      ‘add_variables’ => false,
      ‘plugins’ => array(),
      ‘widget_window_url’ => Mage::getSingleton(‘adminhtml/url’)->getUrl(‘adminhtml/widget/index’),
      ‘directives_url’ => Mage::getSingleton(‘adminhtml/url’)->getUrl(‘adminhtml/cms_wysiwyg/directive’),
      ‘directives_url_quoted’ => preg_quote(Mage::getSingleton(‘adminhtml/url’)->getUrl(‘adminhtml/cms_wysiwyg/directive’)),
      ‘files_browser_window_url’ => Mage::getSingleton(‘adminhtml/url’)->getUrl(‘adminhtml/cms_wysiwyg_images/index’),
      ));
      and add the field:
      ‘config’ => $wysiwygConfig
      instead of
      ‘wysiwyg’ => true,
      Nice code 😉

  2. Raines Reply

    I am new to website development, can you pls help with a step by step guide on adding wysiwyg editor to the backend? the recommended wysiwyg editor, the js needed, how to tag the html and css files. thanks

    • David Reply

      Hi Raines,
      To Add a WYSIWYG Editor, you just need to add one field to a form as other normal fields then add the attribute “wysiwyg” => true (as I mentioned). The necessary CSS and JS can be uploaded as guided in step 2. You can follow either of methods that I covered in this post. Let me know if you have any other questions, OK?

Write A Comment