Magento - add WYSIWYG editor to custom widget

Question

I created a widget inside my custom module. Everything is working and the widget can be embedded onto CMS pages. However, instead of a textarea parameter type I want to add a WYSIWYG editor.

This is the significant part in my widget.xml:

<parameters>            
    <description translate="label">
        <required>0</required>
        <visible>1</visible>
        <label>Description</label>
        <type>textarea</type>
    </description>
</parameters>

I wonder if there's a way to extend Magento's functionality to allow a WYSIWYG editor similar to this:

<parameters>            
    <description translate="label">
        <required>0</required>
        <visible>1</visible>
        <label>Description</label>
        <type>WYSIWYG</type>
    </description>
</parameters>

Has anybody encountered a similar problem? .. or does anyone know how this could be achieved? Maybe through a custom renderer, which calls the WYSIWYG editor, but how..?

Thanx in advance.

Answer 1

I finally managed to do it myself. For all those who have the same problem, this is how I did it:

In the widget.xml I have the parameter set as follows:

<parameters>            
    <text translate="label">
        <required>1</required>
        <visible>1</visible>
        <label>Specify text</label>
        <description>No double quotes allowed, use single quotes instead!</description>
        <type>cmswidget/widget_wysiwyg</type>
    </text>
</parameters>

To enable the WYSIWYG editor on the widget's textarea, I created a new block class in my custom module, extended the class Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element and overwrote the render() function:

class MyCompany_MyModule_Block_Widget_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());
        $editor->setId($element->getId());
        $editor->setForm($element->getForm());
        $editor->setWysiwyg(true);
        $editor->setForceLoad(true);
        return parent::render($editor);
    }
}

Now, I was happy to see the editor inside the widget. Unfortunately there was still a problem. Since the editor creates inline styles and attributes with double quotes and places it to the CMS page as an widget attribut - which itself is also in double quotes, the widget cannot be rendered correctly. To solve this issue I extended the class Mage_Widget_Model_Widget and replaced the editors double quotes with single quotes as follows:

class MyCompany_MyModule_Model_Widget extends Mage_Widget_Model_Widget
{
    public function getWidgetDeclaration($type, $params = array(), $asIs = true)
    {

        if( preg_match('~(^mymodule/myblockclass)~', $type) )
        {
            $params['text'] = str_replace('"', "'", $params['text']);

        }
        return parent::getWidgetDeclaration($type, $params, $asIs);
    }
}

Inside getWidgetDeclaration() function I check if the widget type is the one I want to handle. The widget type is specified in the widget.xml for each widget like here:

<MyCompany_MyModule_MyWidgetName type="mymodule/myblockclass" translate="name description" module="mymodule">
<!-- ... -->
</MyCompany_MyModule_MyWidgetName>

And now I got everything working like I wanted it to be. The editor's generated HTML will have its double quotes replaced by single quotes and the output will work perfectly. Before I escaped the double quotes like this - \"some text \". That seemed to work at first, but when editing the widget by clicking on the icon (Editor view) the html was cut off. Magento's javascript seemed to escape the strings in its own way. However, the method described above will work as I just replace double quotes by single quotes when the widget is being inserted and Magento turns the single quotes into double quotes when opening the widget in CMS Editor view.

Hope this is useful for somebody.

Answer 2

I don't think this is compatible with Magento 1.9 anymore. I've tried this method and I keep getting a javascript error when saving the cms block / page where the widget is added

error: error in [unknown object].fireEvent(): event name: formSubmit error message: Cannot set property 'value' of null