IRNUX

// Blog

  • Oct

    17
    2016
    How to enable Magento’s built-in text processor for a text area on back-end

    If you are writing your own custom module, you might have a text area (not to be confused with a single-line text field) as an input field on your admin interface. By default, a text area shows its contents plainly. You may want make the text area in a way that supports changing the face, the size and the color of the font, making the text bold, italic, underlined, inserting hyperlinks and some other functionalities that are typical of text processors (not text editors).  What You See Is What You Get (WYSIWYG) is a common term used for this type of editor. The editor lets you edit your text with the just mentioned features and see the ultimate appearance simultaneously. Magento has a built-in WYSIWYG editor that you can take advantage of in your module.

    Enabling the editor for the back-end is really simple. Follow these steps to make use of the editor in the back-end part of your module:

    1. Open your module’‘s app/code/local/Mynamespace/Mymodule/Block/Adminhtml/Mymodule/Edit/Tab/Form.php

    This file contains the definition of form elements of the edit page of your module’‘s items. In the body of _prepareForm() method, add the following chunk of code (assuming the name of the field you intend is about and $fieldset is the name of the object returned by addFieldSet()):

          $config = array(
            ‘‘add_widgets’’          => true,
            ‘‘add_variables’’        => true,
            ‘‘add_images’’          => true,
            ‘‘files_browser_window_url’’ => Mage::getSingleton(’‘adminhtml/url’‘)->getUrl(’‘adminhtml/cms_wysiwyg_images/index’‘),
          );

          $fieldset->addField(’‘about’‘, ‘‘editor’‘, array(
            ‘‘name’’    => ‘‘about’‘,
            ‘‘label’’    => Mage::helper(’‘mymodule’‘)->__(’‘About the Item’‘),
            ‘‘title’’    => Mage::helper(’‘mymodule’‘)->__(’‘About the Item’‘),
            ‘‘style’’    => ‘‘width:500px; height:300px;’‘,
            ‘‘wysiwyg’’  => true,
            ‘‘config’’  => $config,
            ‘‘required’’  => true,
          ));

    2. Open the admin controller class of your module (app/code/local/Mynamespace/Mymodule/controllers/Adminhtml/MymoduleController.php)

    Under the editAction() and after $this->getLayout()->getBlock(’‘head’‘)->setCanLoadExtJs(true);
    add the following line:

      if (Mage::getSingleton(’‘cms/wysiwyg_config’‘)->isEnabled()) {
    $this->getLayout()->getBlock(''head'')->setCanLoadTinyMce(true);
    }

    This should now be working. Just don’‘t forget to replace Mynamespace and Mymodule with your own ones.

comments powered by Disqus