Using HTMLArea in Zen Cart :: General Implementation of Plugins
Table of Contents
** Before modifying your files, please read at least Sections 1 - 4 and 10 so that you understand the overall process and the pitfalls! **
1. Requirements
Zen Cart version 1.2.5d with HTMLArea 3.0 (standard inclusion); optional, HTMLArea3.0 + Image Manager (mod by Joe at www.zencarttemplates.com, release date 2005-01-18)
Note: Zen Cart 1.2.5d ships with htmlarea.js Version 290; the Image Manager mod uses htmlarea.js Version 1.70
HTMLArea requires Internet Explorer 5.5+ or Firefox, with differences in operation; see Summary Discussion at the end of this article.
2. Article Overview
Activate the following plugins in HTMLArea 3.0 or HTMLArea 3.0 + Image Manager :
For purposes of this article modifications to the following files will be discussed:
Please Read
There are many approaches that could be taken to accomplish the goal of using the HTMLArea plugins. I chose to have the editor invoked on the textareas within the Admin area related to Catalog Products and to the Define Pages Editor; there may be more files than define_pages_editor.php, collect_info.php and product.php that will need modification for your purposes. You should use the modifications made to those 3 files in this article as a guideline for other files, where appropriate.
At this time there is no override system in place for the Zen Cart Admin area, so we will be changing the base files. Please make backup copies of the original files as well as the files after modification -- the first, to allow you to easily restore your Zen Cart to the default implementation; the second, preparation for future Zen Cart upgrades when these files will be overwritten.
If you use Firefox as your browser of choice, it is recommended that you use the HTMLArea files included in the Image Manager mod for best functionality. Please see Sections 4, 9 and 10 for more information.
3. Basic Implementation
A basic implementation of the HTMLArea 3.0 editor invoking the Table Operations and Spell Checker plugins uses these bits of script in the <HEAD> of the web page where the editor will be used...
<script type="text/javascript">
_editor_lang = "en"; // language file
_editor_url = "../"; // path to HTMLArea files
</script>
<script type="text/javascript" src="../htmlarea.js"></script>
<script type="text/javascript">
HTMLArea.loadPlugin("TableOperations");
HTMLArea.loadPlugin("SpellChecker");
var editor = null;
function initEditor() {
// create an editor for textareas with an ID of "file_contents"
editor = new HTMLArea("file_contents");
editor.registerPlugin("TableOperations");
editor.registerPlugin("SpellChecker");
editor.generate();
return false;
}
</script>
and initializes the new function in the <BODY> tag of the web page containing the textarea.
<body onload="initEditor()">
The overall process to follow is:
For a standalone web page, this works fine; in Zen Cart the script can/will be used on many pages, so Zen Cart calls the script via a PHP include named "htmlarea.php".
4. Modifying htmlarea/popups/link.html
Important! In order to address a problem related to removing URLs (hyperlinks) when using the HTMLArea files included with Zen Cart 1.2.5d, you need to make this modification even if you decide not to use the plugins! However, if you are going to use the files included with the Image Manager plugin/mod, you can skip this section -- the link.html file in that mod is already corrected (contains mods specific to Firefox).
1. Use a text editor to open link.html (e.g., Notepad -- not Word or Wordpad).
2. Comment ( add // to the beginning) Line 52, so that:
"f_href": i18n("You must enter the URL where this link points to")
becomes:
// "f_href": i18n("You must enter the URL where this link points to")
3. Save your changes.
5. Modifying admin/includes/htmlarea.php
1. Use a text editor to open htmlarea.php (e.g., Notepad -- not Word or Wordpad).
2. Uncomment (remove the //) from Line 42, so that:
// echo'<script type="text/javascript">'.BR;
becomes:
echo'<script type="text/javascript">'.BR;
3. Uncomment (remove the //) from Lines 55 - 57, so that:
// echo ' HTMLArea.loadPlugin("TableOperations");' .BR;
// echo ' HTMLArea.loadPlugin("SpellChecker");' .BR;
// echo '</script>' .BR;
becomes:
echo ' HTMLArea.loadPlugin("TableOperations");' .BR;
echo ' HTMLArea.loadPlugin("SpellChecker");' .BR;
echo '</script>' .BR;
4. Insert the following code between Lines 56 and 57:
echo ' var editor = null;' .BR;
echo ' function initEditor() {' .BR
;
echo ' editor = new HTMLArea("file_contents");' .BR;
echo ' editor.registerPlugin("TableOperations");' .BR;
echo ' editor.registerPlugin("SpellChecker");' .BR;
echo ' editor.generate();' .BR;
echo ' return false;' .BR;
echo ' }' .BR;
Line 3 of the above code is critical! Do NOT change "file_contents" -- that is the ID assigned to the textarea in define_pages_editor.php.
5. Save your changes.
6. Modifying admin/define_pages_editor.php
1. Use a text editor to open define_pages_editor.php (e.g., Notepad -- not Word or Wordpad).
2. Comment ( add // to the beginning) Line 134, so that:
if (typeof _editor_url == "string") HTMLArea.replaceAll();
becomes:
// if (typeof _editor_url == "string") HTMLArea.replaceAll();
3. Call the newly defined function (created in Section 3 above) via Body > onload [Line 141], so that:
... bgcolor="#FFFFFF" onload="init()">
becomes:
... bgcolor="#FFFFFF" onload="init();initEditor()">
4. Save your changes.
7. Modifying admin/includes/modules/product/collect_info.php
1. Use a text editor to open collect_info.php (e.g., Notepad -- not Word or Wordpad).
2. Change the end of Line 413, so that:
$languages[$i]['id'])); //,'id="'.'products_description' . $languages[$i]['id'] . '"');
becomes:
$languages[$i]['id']), 'id="file_contents"');
Notice the textarea is being assigned the same ID as is used in define_pages_editor.php! By using it again here, only one (1) function has to be defined in htmlarea.php.
3. Save your changes.
8. Modifying admin/product.php
1. Use a text editor to open product.php (e.g., Notepad -- not Word or Wordpad).
2. Comment ( add // to the beginning) Line 122, so that:
if (typeof _editor_url == "string") HTMLArea.replaceAll();
becomes:
// if (typeof _editor_url == "string") HTMLArea.replaceAll();
3. Call the newly defined function (Section 3 above) via Body > onload [Line 129], so that:
... bgcolor="#FFFFFF" onload="init()">
becomes:
... bgcolor="#FFFFFF" onload="init();initEditor()">
4. Save your changes.
9. Adding HTMLArea 3.0 + Image Manager to the mix
Through trial and error I found I got the best functionality by modifying and using the admin files in Zen Cart Ver 1.2.5d as above, and simply replacing the HTMLArea shipped with Zen Cart with the HTMLArea directory contained in the Image Manager release. In other words, only use that folder -- don't use the version of htmlarea.php that is included in the HTMLArea 3.0 + Image Manager mod.
1. Download the HTMLArea 3.0 + Image Manager mod from www.zencarttemplates.com and unzip it to your Windows desktop.
2. Follow the instructions included to modify htmlarea/plugins/ImageManager/config.inc.php for your Zen Cart installation.
3. Rename your existing installation of HTMLArea to htmlareaBAK as per the instructions.
4. Here's where things change.... move only the htmlarea directory of the HTMLArea 3.0 + Image Manager mod into your Zen Cart installation, do not include the admin directory supplied with that mod.
5. If you have not already made the modifications noted in Sections 5 - 8 above, do so now.
6. Invoke the Image Manager by adding this line of code to admin/includes/htmlarea.php on Line 54:
echo 'HTMLArea.loadPlugin("ImageManager");' .BR;
Please note that you do not need the registration line of coding here
7. Save your changes.
8. If you are using the Spell Checker plugin, locate the images directory for the Image Manager (htmlarea/plugins/imagemanager/img) and rename images as follows (case sensitive):
spell-check.gif -----> blank_spell-check.gif
he-spell-check.gif -----> spell-check.gif
10. Browser Pitfalls [PC-based]
The following comments are based on testing done by the author, on the author's system(s) -- all PCs, no Macs testing was performed; you may or may not see the same results with your browser(s). Overall, even if you are not going to use any of the plugins, you should still use the HTMLArea files from the HTMLArea 3.0 + Image Manager mod as explained in Section 9 above so that you get the best functionality in both browsers, and in Firefox in particular.
Opera, NN and Mozilla
Opera
HTMLArea (with/without Image Manager) does not work in Opera, and does not always gracefully degrade. If you prefer to use Opera as your browser, as does the author, don't invoke this WYSIWYG editor in Zen Cart.
Netscape and Mozilla
No testing was done in current versions of Netscape or Mozilla. One can hope that what works for Firefox will also work for NN and Mozilla, but you never know.
Internet Explorer 6.x
General Problems as shipped without Plugins
Once you invoke plugins, IE will display various errors when loading a page calling HTMLArea if you have the option set to display all script errors. It appears to be related to how the scripts load and doesn't actually affect function once you get past those errors. On first review, there appear to be 2 solutions:
I didn't actually try either of these, but logically either should work. If you don't have script error notification turned on this should not be an issue.
Regardless, the code created when using HTMLArea in IE leaves something to be desired; for instance, when you modify the color of selected text, font tags are applied in IE v. styled spans [which are applied in Firefox]. This is a limitation of IE.
Zen Cart 1.2.5d as shipped with Plugins Invoked and mod'd as described in this article
The undo/redo button does not work, except for color applied to selected text and then only if you have not unselected the text after modifying it.
When removing a URL (hyperlink) the page does not refresh after you close the Add a Link popup; even though the link is removed the text remains underlined, giving the impression that the link still exists. If you view the page in Code View and then go back into WYSIWYG View the page refreshes and the underline is removed.
Zen Cart with HTMLArea + Image Manager mod'd as described in this article, with/without Plugins
The undo/redo button does not work at all.
The problem noted above re removing a URL (hyperlink) is fixed!
Firefox 1.0.2+
General Problems as shipped without Plugins
There is a problem with focus in pop-up windows -- you have to click outside the window to achieve focus within the pop-up. Until you do so, you can't type in a Hex code in the Color Selector, nor a URL in the Add a Link window. (Attempts to force focus by adding variations of window.focus(), etc. to the <body> in the pop-up files had no affect.)
Regardless, the code created when using HTMLArea in is not too bad for general use; the biggest irritation is that it inserts a <br> at the end of paragraphs. And yes, it uses <p> instead of <div> for blocks of text.
Zen Cart 1.2.5d as shipped with Plugins Invoked and mod'd as described in this article
The problem noted above re focus in pop-up windows still exists.
When removing a URL (hyperlink) the page does not refresh after you close the Add a Link popup; even though the link is removed the text remains underlined, giving the impression that the link still exists. If you view the page in Code View and then go back into WYSIWYG View the page refreshes and the underline is removed.
Zen Cart with HTMLArea + Image Manager mod'd as described in this article, with/without Plugins
The problem noted above re focus in pop-up windows is fixed! (The htmlarea.js file included with the Image Manager mod has been modified to address FIrefox issues -- mods that are not in the version of that file shipped with Zen Cart 1.2.5d)
The problem noted above re removing a URL (hyperlink) is fixed!
If you use the Image Manager plugin, when inserting an image it's a little clunky... your selection is not actually reflected in the appropriate areas -- you have to say "Ok" on faith and manually close the window; however, when you select an existing image in your content and open Image Manager to edit your selection, it works as you would expect when you select a new image and click "Ok".