Magento Fontis FCKeditor WYSIWYG Transactional Email

Tim Selaty — Thu, 13 Aug 2009 04:18:52 +0000

Fontis has released an extension for Magento (1.3.2.3 at the time of writing this) that allows for a WYSIWYG (What you see is what you get, aka, a MS Word like editor) for various sections of Magento. This generally allows you to format and style your product descriptions, category descriptions, etc. Only one problem, it doesn’t work in every section of Magento.

In the newest release of Fontis for Magento (1.1.0), Lloyd Hazlett has informed me that they’ve added a WYSIWYG by default to the Transactional Emails page. Way to go guys! Keep up the great work! For those who want to see how it was done, keep scrolling.
http://www.fontis.com.au/ and http://www.magentocommerce.com/extension/586/fontis-wysiwyg-editor

One of the biggest issues / requested fixes for Fontis’s FCKeditor is to have it display the WYSIWYG editor in the Transactional Emails section [System -> Transactional Emails]. The following image is what the editor normally displays as (the undesired and raw one).

The Diagnosis and Cure

As you might guess, adding in raw text and trying to format it with HTML is fairly difficult. There are two ways to enable the editor on the Transactional Emails page.

The First:
On the Admin page [System -> Configuration -> Admin] you will see “WYSIWYG Editor”. Make sure in the Editor Type field that ‘FCKeditor’ is selected. In the Editable Areas, click the ‘Add textarea CSS ID’ button and a dialog will expand.

In the dialog, add “template_text” into the text box. After adding in the text, save the page. The textarea on the transactional emails page should work. However, if you’re like me and never happen to be graced with such luck… you have to do the recommended alternative, adding it in manually. See the next step for directions.

The Second (recommended):
In the case of the first step now working, we’re going to add a new region to the selectable area’s in the editor. Not sure what I mean? Below is a screenshot of all the currently selectable areas in the editor.

As you can see we currently have 6 selectable areas. If you click on any of the items in the blue you’ll notice that all the others deselect back to white. In order for the all of the editable regions to have WYSIWYG editors, you must select them all. You can do this by holding CTR and clicking all of the listed items until they are all highlighted blue.

You’ll need FTP access in order to manually add a new selectable item. With your FTP client open browse to ‘/app/code/community/Fontis/Wysiwyg/Model/Source/Editableareas.php’.

With Editableareas.php open, replace:

 'description',             'label' =&gt; Mage::helper('fontis_wysiwyg')-&gt;__('Product Description')),
array('value' =&gt; 'short_description',       'label' =&gt; Mage::helper('fontis_wysiwyg')-&gt;__('Product Short Description')),
array('value' =&gt; 'page_content',            'label' =&gt; Mage::helper('fontis_wysiwyg')-&gt;__('CMS Page Content')),
array('value' =&gt; 'block_content',           'label' =&gt; Mage::helper('fontis_wysiwyg')-&gt;__('Static Block Content')),
array('value' =&gt; '_generaldescription',     'label' =&gt; Mage::helper('fontis_wysiwyg')-&gt;__('Category Description')),
array('value' =&gt; 'text',                    'label' =&gt; Mage::helper('fontis_wysiwyg')-&gt;__('Newsletter Template')),
);
}
}

With:

 'description',             'label' =&gt; Mage::helper('fontis_wysiwyg')-&gt;__('Product Description')),
array('value' =&gt; 'short_description',       'label' =&gt; Mage::helper('fontis_wysiwyg')-&gt;__('Product Short Description')),
array('value' =&gt; 'page_content',            'label' =&gt; Mage::helper('fontis_wysiwyg')-&gt;__('CMS Page Content')),
array('value' =&gt; 'block_content',           'label' =&gt; Mage::helper('fontis_wysiwyg')-&gt;__('Static Block Content')),
array('value' =&gt; '_generaldescription',     'label' =&gt; Mage::helper('fontis_wysiwyg')-&gt;__('Category Description')),
array('value' =&gt; 'text',                    'label' =&gt; Mage::helper('fontis_wysiwyg')-&gt;__('Newsletter Template')),
array('value' =&gt; 'template_text',           'label' =&gt; Mage::helper('fontis_wysiwyg')-&gt;__('Template Text / Transactional Emails')),
);
}
}

We just added a new item to the array called “template_text”.

Next, browse to and open ‘/app/design/adminhtml/default/default/template/system/email/template/edit.phtml’.

With Edit.phtml open, replace:

new Ajax.Request($('email_template_load_form').action, {
               parameters: Form.serialize($('email_template_load_form'), true),
               area: $('email_template_load_form'),
               onComplete: function (transport) {
                   if (transport.responseText.isJSON()) {
                       var fields = $H(transport.responseText.evalJSON());
                       fields.each(function(pair) {
                          if ($(pair.key)) {
                              $(pair.key).value = pair.value.strip();
                          }
                          if (pair.key == 'template_type') {
                              if (pair.value == 1) {
                                  this.typeChange = true;
                                  $('convert_button').hide();
                                  $('convert_button_back').hide();
                              } else {
                                  this.typeChange = false;
                                  $('convert_button_back').hide();
                                  $('convert_button').show();
                              }
                          }
                       }.bind(this));
                   }
               }.bind(this)
            });

With:

new Ajax.Request($('email_template_load_form').action, {
               parameters: Form.serialize($('email_template_load_form'), true),
               area: $('email_template_load_form'),
               onComplete: function (transport) {
                   if (transport.responseText.isJSON()) {
                       var fields = $H(transport.responseText.evalJSON());
                       fields.each(function(pair) {
                          if ($(pair.key)) {
                              $(pair.key).value = pair.value.strip();
                          }
                          if (pair.key == 'template_type') {
                              if (pair.value == 1) {
                                  this.typeChange = true;
                                  $('convert_button').hide();
                                  $('convert_button_back').hide();
                              } else {
                                  this.typeChange = false;
                                  $('convert_button_back').hide();
                                  $('convert_button').show();
                              }
                          }
                       }.bind(this));
                   }
               var fontis_trans = document.getElementById('template_text___Frame');
               if(fontis_trans) {fontis_trans.contentWindow.location.reload(true);}
               }.bind(this)
            });

We just told the Fontis WYSIWYG editor to refresh itself in the Transactional Emails page whenever we select a new template.

Now, we return to Magento [System->Configuration->Admin]. You should now see Template Text / Transactional Emails as a selectable item. After selecting it, your screen should now look like the following:

Note: If you still have the “template_text” you input from the First Step, you can delete this by clicking the (x) icon next to its name. We no longer need this, we want to have your screen display exactly like the screen shot above.

After selecting this, saving the page, and browsing to the Transactional Emails page and clicking on ‘New Template’ to confirm that indeed the fix was applied… the New Email Template page should now appear like the screen shot below.

That’s it! You’re all set and ready to go.

EDIT: THE SOLUTION IS ABOVE THIS SECTION. DO NOT USE THE FOLLOWING CODE BELOW, ANY INFORMATION BELOW DOCUMENTS A FIX REGARDING THE LOADING OF CONTENT INTO THE WYSIWYG WITH AJAX.

It has been confirmed that after applying the WYSIWYG to the Transactional Emails page, Magento will no longer load in any of the default mail template’s content. After anaylzing the code, I found some things that prove to be interesting.

On line 717 of the New Email Template page source code is the following

load: function() {
            var form = new varienForm('email_template_load_form');
 
            if (!form.validator.validate()) {
                return;
            }
 
            new Ajax.Request($('email_template_load_form').action, {
               parameters: Form.serialize($('email_template_load_form'), true),
               area: $('email_template_load_form'),
               onComplete: function (transport) {
                   if (transport.responseText.isJSON()) {
                       var fields = $H(transport.responseText.evalJSON());
                       fields.each(function(pair) {
                          if ($(pair.key)) {
                              $(pair.key).value = pair.value.strip();
                          }
                          if (pair.key == 'template_type') {
                              if (pair.value == 1) {
                                  this.typeChange = true;
                                  $('convert_button').hide();
                                  $('convert_button_back').hide();
                              } else {
                                  this.typeChange = false;
                                  $('convert_button_back').hide();
                                  $('convert_button').show();
                              }
                          }
                       }.bind(this));
                   }
               }.bind(this)
            });
 
        }

When Magento loads in a new email template, it calls this exact function. Generally, it will find the textarea (template_text). However, Fontis likes to remove this textarea with something that tends to be the bane of most developers, frames.

Take a look at the code before Fontis:

<textarea id="template_text" class="textarea  required-entry" style="height: 24em;" cols="15" rows="2" name="template_text"></textarea>

And now after Fontis:

As you can see, it’s changing the ID of ‘template_text’ from the main editor by adding ‘___Frame’ to it. Additionally, there is security issues and a lot of problems when having JavaScript write to another frame. In short, looks like there has to be some JavaScript added specifically for loading in templates. I am attempting my hand at it, I’ll post back.

After checking back, it seems as if the textarea is first filled with saved content and then processed into the frame. Once the WYSIWYG has all of the data from the textarea’s value, it hides the text area and displays the FCKEditor with the content it copied. The problem seems to rely in being able to reload the wysiwyg with new content from the textarea when selecting a new template to load. However, since the textarea is not being updated, neither is the editor. Additionally, I don’t think the capability or functionality was built in to have the editor update itself during the AJAX request. More to come later.

Beautiful, I figured it out. After having seen Rob’s comment I set out to find an answer, I wanted to share the solution with everyone. After loading in a template as usual, the wysiwyg did not grab the content from the template. I typed this into the URL bar

javascript:document.getElementById('template_text___Frame').contentWindow.location.reload(true);

And BEHOLD, it reloads the frame as WELL as the new content it SHOULD be loading in. I’m writing a custom solution for this fix and will be adding it in the solution section of this post.

The additional fix has been added to update the WYSIWYG on the transactional emails new template page whenever a new template is loaded in.

TLS Web Solutions » magento extension

Magento Fontis FCKeditor WYSIWYG Transactional Email

The Diagnosis and Cure