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

Answer 1

So,the known solutions no longer seem to work on 1.9+, so I produced an alternative, which adds WYSIWYG, but using an alternative editor.

I used this editor:

https://alex-d.github.io/Trumbowyg/

with the end result looking as such:

STEP 1: Download the editor files and pace in adminhtml skin area:

In my example I had placed them in skin/adminhtml/default/js/wysiwyg

STEP 2: In your module, you need to define an admin layout update, and in your adminhtml layout file, add the directives to load the library files (and jquery)

Since I wanted this to appear only n CMS Page edits, I added via the appropriate handle:

        
            
                
            
            
                
            
            skin_jsjs/wysiwyg/trumbowyg.min.js
            skin_cssjs/wysiwyg/ui/trumbowyg.min.css
        
    

STEP 3: Create a new widget class to render the element:

In my example, I placed this is a module under the BLOCKS

Basically, this takes the widget xml defined element, and transposes it over to a textarea element, and then attaches the needed javascript (jquery) to initialise the wysiwyg editor.

You will see thw options being passed to the editor, defined in $options

setForm($element->getForm())
            ->setId($element->getHtmlId())
            ->setName($element->getName())
            ->setLabel($element->getLabel())
            ->setClass('widget-option input-area input-text');
        if ($element->getRequired()) {
            $textarea->addClass('required-entry');
        }
        if ($element->getValue()) {
            $textarea->setValue($element->getValue());
        }
        $options = "btns: ['viewHTML', 'strong', 'em', 'del', 'undo', 'redo', 'formatting', 'superscript', 'subscript', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'unorderedList', 'orderedList', 'horizontalRule', 'fullscreen'],
                    semantic: true,
                    removeformatPasted: true,
                    autogrow: false";

        $textarea->setData('after_element_html',
            "");

        $html = parent::render($textarea);

        return $html;
    }

}

In there you may also note this snippet:

.on('tbwblur', function(){ 
   var html = jQuery(this).trumbowyg('html');
   html = html.replace(/\"/g, '"');
   jQuery(this).trumbowyg('html', html);
}); 

The purpose here is to changed any double quotes (") to the proper html entity of " This is to prevent the storing of the textual data, in the widget params, which is encased with double quotes.

Step 4: Define the widget element:

                50
                Textual Content
                1
                1
                landingpage/widgets_wysiwyg
            

Done.

Hope this is of use to someone.