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' => Mage::helper('fontis_wysiwyg')->__('Product Description')), array('value' => 'short_description', 'label' => Mage::helper('fontis_wysiwyg')->__('Product Short Description')), array('value' => 'page_content', 'label' => Mage::helper('fontis_wysiwyg')->__('CMS Page Content')), array('value' => 'block_content', 'label' => Mage::helper('fontis_wysiwyg')->__('Static Block Content')), array('value' => '_generaldescription', 'label' => Mage::helper('fontis_wysiwyg')->__('Category Description')), array('value' => 'text', 'label' => Mage::helper('fontis_wysiwyg')->__('Newsletter Template')), ); } }
With:
'description', 'label' => Mage::helper('fontis_wysiwyg')->__('Product Description')), array('value' => 'short_description', 'label' => Mage::helper('fontis_wysiwyg')->__('Product Short Description')), array('value' => 'page_content', 'label' => Mage::helper('fontis_wysiwyg')->__('CMS Page Content')), array('value' => 'block_content', 'label' => Mage::helper('fontis_wysiwyg')->__('Static Block Content')), array('value' => '_generaldescription', 'label' => Mage::helper('fontis_wysiwyg')->__('Category Description')), array('value' => 'text', 'label' => Mage::helper('fontis_wysiwyg')->__('Newsletter Template')), array('value' => 'template_text', 'label' => Mage::helper('fontis_wysiwyg')->__('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.
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.
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.
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
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.
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!
many thanx tim! it’s working beautifully now…
Awesome, the first one worked completly fine
thanks!
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.
I am wondering if the same technique can be used for enabling the wisywig for addition text field attributes that are created?
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!