Magento - Add WYSIWYG Editor to Custom Widget

Question

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

This is a significant part of 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 is a way to extend Magento's functionality so that the WYSIWYG editor looks like this:

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

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

Thanx in advance.

Answer 1

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

In widget.xml, I have a set of parameters 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 in the widget text box, I created a new class of blocks in my custom module, expanded the Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element class, and rewritten 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 them on the CMS page as an attribute of the widget, which itself is also in double quotes, the widget cannot be displayed correctly. To solve this problem, I extended the Mage_Widget_Model_Widget class and replaced the editor 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 the getWidgetDeclaration () function, I check to see if the widget type is the one I want to handle. The type of widgets is specified in widget.xml for each widget, as here:

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

And now everything works for me as I would like. The created HTML editor will have its double quotes replaced with single quotes, and the output will work fine. Before I escaped double quotes like this - \ "some text \". At first it worked, but when editing the widget by clicking the icon (editor view), html was disabled. Magento javascript seemed to avoid lines in its own way. However, the method described above will work, as I just replace the double quotes with single quotes when the widget is inserted, and Magento turns single quotes into double quotes when opening the widget in the CMS editor view.

Hope this is helpful to someone.

Answer 2

I do not think this is compatible with Magento 1.9. I tried this method and I keep getting javascript error while saving cms block / page where widget is added

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

Answer 3

Based on Rouzbeh, I added a little jQuery code that checks to see if double quotes are used:

 <description> <![CDATA[ <script> jQuery("#widget_options textarea").keyup(function(){ if(jQuery(this).val().indexOf('"') > -1){ jQuery(this).val(jQuery(this).val().replace('"',"'")); alert('No double quotes allowed, use single quotes instead.') } }); </script> ]]> </description> 

Answer 4

So, well-known solutions no longer work on 1.9+, so I prepared an alternative that adds WYSIWYG, but uses an alternative editor.

I used this editor:

https://alex-d.imtqy.com/Trumbowyg/

while the final result is as follows:

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

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

STEP 2. In your module, you need to determine the update of the administrator layout, and in your adminhtml layout file add directives for loading library files (and jquery)

Since I wanted this to be displayed only with editing CMS pages, I added through the appropriate descriptor:

 <adminhtml_cms_page_edit> <reference name="head"> <action method="addJs"> <script>lib/jquery/jquery-1.12.0.js</script> </action> <action method="addJs"> <script>lib/jquery/noconflict.js</script> </action> <action method="addItem"><type>skin_js</type><name>js/wysiwyg/trumbowyg.min.js</name></action> <action method="addItem"><type>skin_css</type><name>js/wysiwyg/ui/trumbowyg.min.css</name></action> </reference> </adminhtml_cms_page_edit> 

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

In my example, I placed this module under BLOCKS

This basically takes the xml element defined by the widgets and wraps it on the textarea element and then attaches the necessary javascript (jquery) to initialize the wysiwyg editor.

You will see that thw options are passed to the editor defined in $ options

 <?php class ProxiBlue_Landingpage_Block_Widgets_Wysiwyg extends Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element { public function render(Varien_Data_Form_Element_Abstract $element) { $textarea = new Varien_Data_Form_Element_Textarea(); $textarea->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', "<script>jQuery(document).ready( function() { jQuery(" . $element->getHtmlId() .").trumbowyg({ " . $options . " }) .on('tbwblur', function(){ var html = jQuery(this).trumbowyg('html'); html = html.replace(/\"/g, '&quot;'); jQuery(this).trumbowyg('html', html); }); });</script>"); $html = parent::render($textarea); return $html; } } 

Here you can also mark this snippet:

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

The goal here is to change any double quotes (") to the corresponding html " object. This is done to prevent the storage of text data in widget parameters enclosed in double quotes.

Step 4: Define the widget element:

 <text_blurb translate="label"> <sort_order>50</sort_order> <label>Textual Content</label> <visible>1</visible> <required>1</required> <type>landingpage/widgets_wysiwyg</type> </text_blurb> 

Done.

Hope this is useful to someone.