Add WYSIWYG Editor To Custom Widget

Question

I am attempting to add a WYSIWYG editor to a field within a custom widget. I'm actually able to get the WYSIWYG editor to appear as displayed in the screenshot below:

My problem is that the data from the WYSIWYG editor is not populating the hidden textarea field, so the field contents are blank. (If I click the "Show/Hide" editor so that it is rendering plain HTML and then click "Insert Widget", the field's contents are copied over as expected.)

Am I missing core functionality of the WYSIWYG editor that is preventing the translation from the editor to the textarea field or is there way that I can insert some JS when the WYSIWYG field is added to copy over the editor's contents when the element loses focus?

Here are the relevant portions of my widgets.xml (omitting opening/closing widget tag)

<brands_detailedslide type="city_brands/widget_detailedslide">
    <name>Detailed Slide</name>
    <description type="desc">Creates Markup for a Detailed Slide</description>
    <parameters>
        <slide_content>
            <label>Slide Content</label>
            <visible>1</visible>
            <required>1</required>
            <type>city_brands/widget_slide_wysiwyg</type>
        </slide_content>
    </parameters>
</brands_detailedslide>

Note that the type points to City_Brands_Block_Widget_Slide_Wysiwyg, which contains:

class City_Brands_Block_Widget_Slide_Wysiwyg extends Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element
{
    public function render(Varien_Data_Form_Element_Abstract $element)
    {

        $editor = new Varien_Data_Form_Element_Editor($element->getData());

        //Prevent foreach error that occurs without this
        $editor->getConfig()->setPlugins(array());

        $editor->setId($element->getId());
        $editor->setForm($element->getForm());
        $editor->setWysiwyg(true);
        $editor->setForceLoad(true);

        return parent::render($editor);
    }
}

Answer 1

The problem is that the information is only copied across when you select the button Show/Hide editor and not as you type.

You could build in some JavaScript that copied the content on blur or submitting the form.

Answer 2

The problem with visible editor block at the beginning is that tinyMce is not initialized properly. If you take a look on some CMS page and display it source you will notice that there is tinyMceWysiwygSetup called with a lot of options. Two of them are very interesting:

"enabled":true" 

and

"hidden":true

The problem is that if you do:

 $editor = new Varien_Data_Form_Element_Editor($element->getData());

    //Prevent foreach error that occurs without this
    $editor->getConfig()->setPlugins(array());

    $editor->setId($element->getId());
    $editor->setForm($element->getForm());
    $editor->setWysiwyg(true);
    $editor->setForceLoad(true);

    return parent::render($editor);

on your render function - you do not pass all needed data. The easiest solution for that is to get proper config and put it in your custom editor. It should be like below:

        public function render(Varien_Data_Form_Element_Abstract $element)
    {
        // take default wysiwyg config
        $wysiwygConfig = Mage::getSingleton('cms/wysiwyg_config');

        $editor = new Varien_Data_Form_Element_Editor($element->getData());

        // put config into your editor
        $editor->setConfig($wysiwygConfig->getConfig());
        $editor->setId($element->getId());
        $editor->setForm($element->getForm());
        $editor->setWysiwyg(true);
        $editor->setForceLoad(true);

        return parent::render($editor);
    }

as you can see -> plugins parameter is no longer needed, because all data is in our $wysiwygConfig. You can modify this config before pass it into your editor if needed. After that - you do not need anymore your Javascript solution, because tinyMce will be instantiated properly (checked and tested on my own magento instance).

If for some reason it will still not work properly, try to add custom handle update in your admin layout: your_module.xml:

<adminhtml_widget_instance_edit>
    <update handle="editor"/>
    <reference name="head">
        <action method="setCanLoadExtJs">
            <flag>1</flag>
        </action>
        <action method="setCanLoadTinyMce">
            <flag>1</flag>
        </action>
        <action method="addJs">
            <script>yourmodule/adminhtml/tinymce_widget.js</script>
        </action>
    </reference>
</adminhtml_widget_instance_edit>

You can choose different place like <adminhtml_widget_index>, <adminhtml_widget_instance_index>, etc, - depends on where you need it.

Answer 3

I just wanted to share my solution of how to get rid of this bug.

I'm overriding the JavaScript method WysiwygWidget.Widget.prototype.insertWidget like this:

WysiwygWidget.Widget.prototype.insertWidget = function() {
    widgetOptionsForm = new varienForm(this.formEl);

    // Trigger click on Show/Hide button to copy content from TinyMCE to textarea
    $(this.formEl).down('button.show-hide').click();

    if(widgetOptionsForm.validator && widgetOptionsForm.validator.validate() || !widgetOptionsForm.validator){
        var formElements = [];

        // [...]
    }
};

This code I put in its own little JavaScript file and add it via default layout handle to all adminhtml pages. Yes, it's hackish and ugly and I haven't tested thoroughly for any sideeffects, but I think this is not quite necessary.