Using Magento 1.4's WYSIWYG editor on custom admin pages

Question

Anyone know how to get the new 1.4 WYSIWYG editor (TinyMCE) working with custom admin pages?

I have some modules I made that have input fields in the admin->system->config section, and I’d like to get the new editor to show on the textareas there, but I can't find where they are defined.

Solution 1

To load the TINY MCE on a specific page, use the following function on the Adminhtml Edit block of your module:

protected function _prepareLayout() {
 parent::_prepareLayout();
 if (Mage::getSingleton('cms/wysiwyg_config')->isEnabled()) {
  $this->getLayout()->getBlock('head')->setCanLoadTinyMce(true);
 }
} 

To enable the editor for a certain editable textfield, just use 'wysiwyg' => true, instead of 'wysiwyg' => false. i.e.:

$fieldset->addField('description', 'editor', array(
    'name'      => 'description',
    'label'     => Mage::helper('sevents')->__('Description'),
    'title'     => Mage::helper('sevents')->__('Description'),
    'style'     => 'height:12em;width:500px;',
    'config'    => Mage::getSingleton('cms/wysiwyg_config')->getConfig(),
    'wysiwyg'   => true,
    'required'  => true,
)); 

Solution 2

Here are a few simple steps that will help you make TinyMCE work with Magento CMS pages.

Step 1.

Download

js/tiny_mce/tiny_mce.js

Step 2.

app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php

 $fieldset->addField('content', 'editor', array(
        'name'      => 'content',
        'label'     => Mage::helper('cms')->__('Content'),
        'title'     => Mage::helper('cms')->__('Content'),
        'style'     => 'height:36em;',
        'wysiwyg'   => false,
        'required'  => true,
    ));

and change it to

 $fieldset->addField('content', 'editor', array(
        'name'      => 'content',
        'label'     => Mage::helper('cms')->__('Content'),
        'title'     => Mage::helper('cms')->__('Content'),
        'style'     => 'height:36em;',
        'wysiwyg'   => true,
        'theme' => 'advanced',
        'required'  => true,
    ));

As you can see, here we changed on existing attribute ("wysiwyg") value and added new attribute "theme".

Step 3.

/lib/Varien/Data/Form/Element/Editor.php

 $html = '
    <textarea name="'.$this->getName().'" title="'.$this->getTitle().'" id="'.$this->getHtmlId().'" class="textarea '.$this->getClass().'" '.$this->serialize($this->getHtmlAttributes()).' >'.$this->getEscapedValue().'</textarea>
    <script type="text/javascript">
        // <![CDATA[
            /* tinyMCE.init({
                mode : "exact",
                theme : "'.$this->getTheme().'",
                elements : "' . $element . '",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_path_location : "bottom",
                extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
                theme_advanced_resize_horizontal : "false",
                theme_advanced_resizing : "false",
                apply_source_formatting : "true",
                convert_urls : "false",
                force_br_newlines : "true",
                doctype : \'< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\'
            });*/
        //]]>
    </script>';

to

 $html = '
    <textarea name="'.$this->getName().'" title="'.$this->getTitle().'" id="'.$this->getHtmlId().'" class="textarea '.$this->getClass().'" '.$this->serialize($this->getHtmlAttributes()).' >'.$this->getEscapedValue().'</textarea>
    <script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
    //< ![CDATA[
        Event.observe(window, "load", function() {
            tinyMCE.init({
                mode : "exact",
                theme : "'.$this->getTheme().'",
                elements : "' . $element . '",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_path_location : "bottom",
                extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
                theme_advanced_resize_horizontal : "false",
                theme_advanced_resizing : "false",
                apply_source_formatting : "true",
                convert_urls : "false",
                force_br_newlines : "true",
                doctype : \'< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\'
            });
        });
    //]]>
    </script>';

As you can see, there were only three minor changes needed (download, modify, modify) to get the TinyMCE editor working.

Hope this helps. Cheers.

© Branko Ajzele (source)

Solution 3

in EW_Press_Block_Adminhtml_Press_Edit (EW/Press/Block/Adminhtml/Press/Edit.php) paste this function

protected function _prepareLayout()
{
    parent::_prepareLayout();
    if (Mage::getSingleton('cms/wysiwyg_config')->isEnabled())
    {
        $this->getLayout()->getBlock('head')->setCanLoadTinyMce(true);
    }
}

and than in the form.php (EW_Press_Block_Adminhtml_Press_Edit_Tab_Form) /(EW/Press/Block/Adminhtml/Press/Edit/Tab/Form.php)/

'config' => Mage::getSingleton('cms/wysiwyg_config')->getConfig(),

add it so it will look like below:

$fieldset->addField('content', 'editor', array(
          'name'      => 'content',
          'label'     => Mage::helper('module')->__('Site Description'),
          'title'     => Mage::helper('module')->__('Site Description'),
          'style'     => 'width:400px; height:300px;',
          'required'  => true,
          'config'    => Mage::getSingleton('cms/wysiwyg_config')->getConfig(),
          'wysiwyg'   => true
      ));

now reload the page to see the effect.

Solution 4

Here are the steps that I followed.

Preparing editor used in edit form app/code/local/Mynamespace/Mymodule/Block/Adminhtml/Mymodule/Edit.php

protected function _prepareLayout()
{
    // added this code 
    if (Mage::getSingleton('cms/wysiwyg_config')->isEnabled()) {
        $this->getLayout()->getBlock('head')->setCanLoadTinyMce(true);
        $this->getLayout()->getBlock('head')->setCanLoadExtJs(true);
    }
    parent::_prepareLayout();
}

Transforming textarea to editor

app/code/local/Mynamespace/Mymodule/Block/Adminhtml/Mymodule/Edit/Tab/Form.php

Include the content within ‘_prepareForm()‘ function

$config = Mage::getSingleton('cms/wysiwyg_config')->getConfig(
array(
'add_widgets' => false,
'add_variables' => false,
'add_images' => false,
'files_browser_window_url'=> $this->getBaseUrl().'admin/cms_wysiwyg_images/index/',
));



$fieldset->addField('content', 'editor', array(
'name' => 'content',
'label' => Mage::helper('mymodule')->__('Content'),
'title' => Mage::helper('mymodule')->__(’Content'),
'style’ => 'width:700px; height:320px;',
'wysiwyg' => true,
'required' => true,
'config' => $config,
));

View more solutions