0

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:

Screenshot (Form) Screenshot (Firebug)

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.

2
  • Try changing the config to Mage::getSingleton('cms/wysiwyg_config')->getConfig(array('add_variables' => false, 'add_widgets' => false,'files_browser_window_url'=>$this->getBaseUrl().'admin/cms_wysiwyg_images/index/')), Nov 23, 2015 at 17:42
  • @R.S It dit not make a difference. I found out that the problem is related to multiple tabs that all contained field with the same id Nov 24, 2015 at 7:53

2 Answers 2

2

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.

3
  • Close. I already used "slider_content" as id because otherwise the whole "content" block turned into an editor :) The remaining "content" only determines the name, which is already modified by addFieldNameSuffix() to have a different name on each tab. setHtmlIdPrefix() sounds like a good idea, but all tabs are within one form. If you have a solution for using a different prefix in different fieldsets of the same form, I'll happily accept the answer. Nov 24, 2015 at 8:49
  • @fschmengler. $form = new Varien_Data_Form(); in each tab. Then you will have different instances of Varien_Data_Form in each tab. This will work because the elements are moved via js in an other <form> anyway. The core does the same thing. Check this for example: github.com/OpenMage/magento-mirror/blob/magento-1.9/app/code/… and this: github.com/OpenMage/magento-mirror/blob/magento-1.9/app/code/…
    – Marius
    Nov 24, 2015 at 9:02
  • Of course.. these are already separate Varien_Form instances. Thanks Marius, for the clean solution! Nov 24, 2015 at 9:08
1

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());

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.