Magento Fontis FCKeditor WYSIWYG Transactional Email

Posted in Magento, Miscellaneous on August 12, 2009 | 13 Comments »

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).

fck-2

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.

fck-1

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:

fck-3

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.

fck-4

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.

Tags: fck editor, fck wysiwyg, fckeditor, fontis, fontis extension, Magento, magento extension, new email template, template text, template_text, transactional email wysiwyg, wysiwyg

13 thoughts on “Magento Fontis FCKeditor WYSIWYG Transactional Email”

Lloyd Hazlett on August 14, 2009 at 9:59 pm said:

Thanks a lot for the mention, glad the extension has been useful for you! Sorry to hear the add id feature hasn’t worked for you, but you’re probably right in that we should include the template text area by default. We’ll add it for the next release.
Tim Selaty on August 15, 2009 at 3:02 am said:

Awesome! Looking forward to the release. I’ll check back and update my post accordingly. Thank you for looking into it, always great to know the community is improving and looking to expand its functionality.
rob on August 20, 2009 at 3:58 pm said:

hi there… this worked, but for some reason fckeditor is unable to load in any of the default mail templates. it loads the subject line, but the content remains blank. any idea why this is happening or how to get around it?

thanks,
-rob
Tim Selaty on August 21, 2009 at 5:10 am said:

Hi Rob, I just hopped on over to Magento’s Transactional Emails. You’re right, it loads the subject line, but doesn’t load the content into the text area.

I have a suspicion that the textarea is replaced and renamed after being loaded on the page, and when the JavaScript executes to load in the template.. normally it would find that particular textarea and set its “value” to be that of the loaded template.

I’m looking into it as we speak, I’ll post another reply if I find anything interesting or a fix and update my post accordingly.

Thanks for finding the bug.
Tim Selaty on August 21, 2009 at 10:50 am said:

Hi Rob, the update to load in the default mail templates has been posted in this article. Hope this fixes your issue. (: Let me know if it doesn’t and it still gives you trouble, I’d be happy to help!
rob on August 22, 2009 at 7:41 am said:

many thanx tim! it’s working beautifully now…
Danielle on August 25, 2009 at 7:59 pm said:

Awesome, the first one worked completly fine thanks!
Lloyd Hazlett on September 3, 2009 at 3:34 pm said:

Now included in our extension as of the latest release (1.1.0) along with some other enhancements, get it from our Fontis WYSIWYG extension page. Thanks again for getting this working.
Tim on December 6, 2009 at 7:28 am said:

I am wondering if the same technique can be used for enabling the wisywig for addition text field attributes that are created?
Tim Selaty on December 13, 2009 at 7:59 pm said:

Hi Tim,

Sorry for the late reply, I’ve been busy with the holiday season.

When you say additional text field attributes, I am unsure what you mean? Text field attributes are disabled, name, size, type, etc. Are you referring to textarea’s? And on what pages is the WYSIWYG not displaying that you would like to be?

I’ll be more than glad to help!
thomas on January 26, 2011 at 6:17 pm said:

Hello,

I tried to put the WYSIWYG editor. Installation through magento Connect is successful but in System -> Configuration -> Admin i don’t have any tab about WYSIWYG editor…

Only 4 :
-admin user email
-startup page
-Admin base url
-security

How to fix it up ?
thank you

note : magento 1.3.2.4
sulekh on June 23, 2011 at 11:10 pm said:

I have added the extension and i am adding the templates to newsletter through admin. I have upload images through editor and it is displaying in preview template option but the images in newsletter template is not displaying with E-mails , let me want to confirm is it due to the relative path in FCK source code .
the image code is as below
.

any help will be great for me
Hritik Jain on July 13, 2012 at 5:44 am said:

Hi,

I have added Fontis_Wysiwyg-1.1.0 on my site.
I added a attribute “footer_description” on Category in “Genaral Information” group.
this attribute is textarea. i added
description,short_description,page_content,block_content,_generaldescription,text,template_text,footer_description

In xml and
array(‘value’ => ‘footer_description’, ‘label’ => Mage::helper(‘fontis_wysiwyg’)->__(‘Footer Description’)),
in Editableareas.php file. But getting editor on Manage category section.

The Diagnosis and Cure

13 thoughts on “Magento Fontis FCKeditor WYSIWYG Transactional Email”

Leave a Reply Cancel reply