New Zenner
- Join Date:
- May 2006
- Posts:
- 5
- Plugin Contributions:
- 0
Using TinyMCE Editor with Zen Cart
I don't really consider this a formal contribution...but rather, just an explanation on how I managed to get TinyMCE working with my Zen Cart install. It was surprisingly very easy and, aside from the time it took to ftp the TinyMCE files to my server, I had this implemented in about five minutes.
I can't guarantee that it will work for you and, being new to zen cart, I have no business offering any reliable support - but will certainly try if you have problems.
I've used TinyMCE quite a bit for other CMS solutions and it is my preferred open source WYSIWYG editor for clients. If you have no experience with it, you can test drive it from their website.
Anyways - so this is more of a hack in that you aren't really modifying any of the core files, but rather...just adding one block of javascript to those pages that you want to use the TinyMCE editor on. In my case, it was product.php and ezpages.php - the only pages my client will need access to a WYSIWYG editor.
I liked doing it this way because:
- It was easy to implement
- It doesn't remove any original code from the core files - only adds to it
- It is easy to reverse if it doesn't work
- TinyMCE rocks over HTMLArea.
What could be problematic:
- If your client gets a whim to go back into the configuration area and turn HTMLArea back on.
So with that said...here is how I did it:
Step 1: Back-up Database. The excellent backup tool I use is the one contributed by DrByte.
Step 2: Go into your Zen Cart Admin area and turn off HTMLArea in the following areas:
- Configuration > My Store > HTMLArea > Choose Edit > Choose NONE
- Catalog > Categories/Products > Next to the 'Text Editor' drop down in the corner - make sure NONE is selected
- Tools > EZ-Pages > Next to the 'Text Editor' drop down in the corner - make sure NONE is selected
(the last two may be overkill, as I'm not sure if turning it off in the config area overrides those settings - but that is just what I did)
Step 3: Download and Unzip this TinyMCE package which includes the iBrowser Plugin (these instructions are also in that zip file).
**Step 4: Upload/FTP the entire tiny_mce folder and generic.css to your admin directory. ** The generic.css file simply controls how text, links, etc look while you are editing. This has nothing to do with the actual content and won't affect your existing stylesheets. You can modify this however you like. I like using it so my clients are editing in the same style of text as the rest of their site is using.
**Step 5: You need to set up a few things for the iBrowser plugin, which allows you to easily upload, insert and manage images directly from the TinyMCE editor window. ** Although it can be configured to upload to whatever directories you specify within the ibrowser config file, it is currently set to handle two directories: 'images' and 'uploads' (both which need to be located in your zen cart root directory - not the admin directory).
So to make all this happen, you need to set write permissions on a few folders. I had to use 777, but maybe you can get away with 755 or 775.
-
You should already have an images folder in your zen cart root directory. If you don't, create one and Chmod (set permissions) to 777.
-
Create another folder called 'uploads' in your zen cart root directory. Chmod it to 777
-
Browse to the following two folders and Chmod to 777
/admin/tiny_mce/plugins/ibrowser/temp
/admin/tiny_mce/plugins/ibrowser/scripts/phpThumb/cache
(note: the 'uploads' and 'images' folders are the ones I like using for the ibrowser tool. If you want to use something different, or add more folders, navigate to the config.inc.php file in tiny_mce\plugins\ibrowser\config\ and edit the directories around line 93. Just make sure that whatever folders you use have the proper write permissions.)
**Step 6: The last step is inserting the one block of javascript code in the core files you want the TinyMCE editor to appear on. ** These instructions assume that you only want the editor for adding/editing EZ Pages and Products. If you want to use it in other areas, follow the same steps for that particular core file.
-
Open ezpages.php and product.php from the admin directory.
-
Go to line 207 in ezpages.php or 112 in product.php (or thereabouts) and locate this block code:
<script type="text/javascript">
<!--
function init()
{
cssjsmenu('navbar');
if (document.getElementById)
{
var kill = document.getElementById('hoverJS');
kill.disabled = true;
}
if (typeof _editor_url == "string") HTMLArea.replaceAll();
}
// -->
</script>
- Paste the following code just above that:
<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
width : "100%",
height : "460",
relative_urls : false,
remove_script_host : true,
document_base_url : "http://www.yourdomain.com/",
plugins : "ibrowser,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,searchreplace,print,paste,directionality,fullscreen,noneditable,contextmenu",
theme_advanced_buttons1_add : "fontselect,fontsizeselect,forecolor,ibrowser",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,backcolor,liststyle",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "center",
theme_advanced_disable : "image",
theme_advanced_statusbar_location : "bottom",
content_css : "generic.css",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "hr[class|width|size|noshade]",
file_browser_callback : "fileBrowserCallBack",
custom_undo_redo_levels : 10,
paste_use_dialog : false
});
</script>
- (this is Important): Change the document_base_url to the url that your zen cart is installed to.
Example:
If zen cart is installed in your domain root directory:
document_base_url : "http://www.yourname.com/",
If zen cart is installed in a sub-directory on your domain (replace foldername with the sub-direcotry):
document_base_url : "http://www.yourname.com/foldername/",
And that's it. Test it out by going to the admin area and opening one of your EZ pages or by trying to add a new product.
This loads TinyMCE with almost all of the available plugins (which slows the initial page load time). You can configure the editor to only load those plugins you need. You can also customize the toolbar itself (especially nice if you don't want your clients messing with fonts, sizes, etc)....but I don't have the energy to get into how to do all that right now. Instead, feel free to peruse the TinyMCE Website, Forum and User Manual. Their FAQ page is also helpful.
You'll notice the editor pages will be slower to open than they were with HTMLArea....but again, this is partly due to so many plugins being loaded. If it bothers you, you can also search through the TinyMCE forums to some other solutions...one of which is calling to a gzip version of the .js code....but again, that goes beyond these instructions... :)
You'll probably want to configure the TinyMCE configuration (the block of javascript you added to the core files) to suit your own needs. The way it is now is just how I usually have it.
Good luck...
