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.

  • 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/')), – Renon Stewart Nov 23 '15 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 – Fabian Schmengler Nov 24 '15 at 7:53
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.

  • 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. – Fabian Schmengler Nov 24 '15 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 '15 at 9:02
  • Of course.. these are already separate Varien_Form instances. Thanks Marius, for the clean solution! – Fabian Schmengler Nov 24 '15 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, privacy policy and cookie policy

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