Custom Form with WYSIWYG Element: No content update and “Show / Hide Editor” Button does not work

Question

I have a problem with enabling the WYSIWYG editor in a custom admin form. With a normal textarea, everything works:

    $fieldset->addField('slider_content', 'textarea', array(
        'name' => 'content',
        'label' => $helper->__('Content text'),
    ));

Now I change it to WYSIWYG:

    $fieldset->addField('slider_content', 'editor', array(
        'name' => 'content',
        'label' => $helper->__('Content text'),
        'wysiwyg' => true,
        'config' => Mage::getSingleton('cms/wysiwyg_config'),
    ));

And this is the layout update to include necessary JS:

    <reference name="head">
        <action method="setCanLoadExtJs"><flag>1</flag></action>
        <action method="setCanLoadTinyMce"><flag>1</flag></action>
        <action method="addJs"><script>mage/adminhtml/variables.js</script></action>
        <action method="addJs"><script>mage/adminhtml/wysiwyg/widget.js</script></action>
        <action method="addJs"><script>prototype/window.js</script></action>
        <action method="addJs"><script>prototype/prototype.js</script></action>
        <action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
    </reference>

Result:

The button does not do anything visible. The hidden textarea exists and the highlighting in Firebug suggests that it is updated on click, but it stays hidden. Also it does not update its content when I make changes in the editor, so that when I save, nothing changes.

Any idea what the reason for this might be? There are no errors in the JavaScript console.

Answer 1

This happens because you name your field content. Then the TinyMCE js looks for the element with id content to apply the editor. But there is already a content element on the page and it's a div.

Adding a prefix to the form elements solves this issue because the element does not have the id content anymore. It has something_content.
You can add this prefix with one line of code.

$form->setHtmlIdPrefix('something_');

Doing this, you don't need to alter the form data you pass to $form->addValues to add your prefix. It will all be done automatically.

The id prefix can be different for each tab if you have multiple tabs.

Answer 2

The form was on a tab widget and as soon as there were multiple tabs, the elements had duplicate ids, this is what broke the editor. I added a unique prefix $elementIdPrefix for each tab, this solved the issue:

$fieldset->addField($elementIdPrefix . 'content', 'editor', array(
    'name' => 'content',
    'label' => $helper->__('Content text (top)'),
    'wysiwyg' => true,
    'config' => $wysiwygConfig,
));

To still be able to populate the form with data from a model, which is done based on the element id, I used the following code to add data:

$slideData = $this->_getCurrentSlide()->getData();
$formData = array();
foreach($slideData as $key => $value) {
    $formData[$elementIdPrefix . $key] = $value;
}
$form->addValues($formData);

$this->_getCurrentSlide() returns the model, previously the code was just:

$form->addValues($this->_getCurrentSlide());