Page 1 of 4 123 ... LastLast
Results 1 to 10 of 40
  1. #1
    Join Date
    May 2006
    Posts
    5
    Plugin Contributions
    0

    Default 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:

    1. It was easy to implement
    2. It doesn't remove any original code from the core files - only adds to it
    3. It is easy to reverse if it doesn't work
    4. TinyMCE rocks over HTMLArea.

    What could be problematic:

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

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

    2. Create another folder called 'uploads' in your zen cart root directory. Chmod it to 777

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



    1. Open ezpages.php and product.php from the admin directory.

    2. Go to line 207 in ezpages.php or 112 in product.php (or thereabouts) and locate this block code:

    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>
    3. Paste the following code just above that:



    Code:
    	<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>
    4. (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...

  2. #2
    Join Date
    Aug 2006
    Posts
    4
    Plugin Contributions
    0

    Default Re: Using TinyMCE Editor with Zen Cart

    Excellent. Thanks for the info. I have very little knowledge of html, but I noticed in the ez page.php that there is a reference to fckeditor. Will that be a problem?

    Also, is there a way to simply make tinymce the default html editor instead of htmlarea?

  3. #3
    Join Date
    Feb 2004
    Location
    portsmouth, nh us
    Posts
    119
    Plugin Contributions
    4

    Default Re: Using TinyMCE Editor with Zen Cart

    Very Nice. I installed this on two other php files for the defined pages and categories with no problems.

    Thanks for this
    "You must be the change you wish to see in the world" - Ghandi

  4. #4
    Join Date
    Aug 2006
    Posts
    3
    Plugin Contributions
    0

    Re: Using TinyMCE Editor with Zen Cart

    Hi Folks,

    I have installed this to the letter and i am not getting any of it to work.

    I still have HTML editor and cant find any mention of TinyMCE

    Really frustrating as this is my third attempt at doing this and dont understand what on earth i am doing wrong!?

    Please please help.

    Thanks

  5. #5
    Join Date
    Feb 2004
    Location
    portsmouth, nh us
    Posts
    119
    Plugin Contributions
    4

    Default Re: Using TinyMCE Editor with Zen Cart

    That is all you will have. Make sure that the editor drop down is set to --none-- and no editor is set in configuration>>mystore>>html editor
    "You must be the change you wish to see in the world" - Ghandi

  6. #6
    Join Date
    Aug 2006
    Posts
    3
    Plugin Contributions
    0

    Default Re: Using TinyMCE Editor with Zen Cart

    Hi and Thanks for the reply...

    I have done the all of what is said in the instructions.

    I have it set to none as required in config etc. However on selecting non i get the standard html editor(not HTML Area).

    ??????

    Bonkers!

  7. #7
    Join Date
    Feb 2004
    Location
    portsmouth, nh us
    Posts
    119
    Plugin Contributions
    4

    Default Re: Using TinyMCE Editor with Zen Cart

    check in the upper right hand corner of the product pages and see if it says htmlarea
    "You must be the change you wish to see in the world" - Ghandi

  8. #8
    Join Date
    Aug 2006
    Posts
    3
    Plugin Contributions
    0

    Default Re: Using TinyMCE Editor with Zen Cart

    hi,

    I have checked that already and it has none selected. Same as every where.

    I really dont know what an earth to do to get it working...

    I tried it again last night as a clean install and still not working.

    Nevermind, just have to make do with HTML area.

  9. #9
    Join Date
    Jul 2004
    Posts
    246
    Plugin Contributions
    0

    Default Re: Using TinyMCE Editor with Zen Cart

    I'm using this to edit everything I can and it kicks the crap out of htmlarea

    This is fantastic and installation is really straight forward.
    Does take ages to upload though so if you know how, I would recommend uploading a compressed tiny_mce and extract it onto the server.

    Good work
    UK based Zen Cart Web Designer here www.handcoded.co.uk

  10. #10
    Join Date
    Aug 2006
    Posts
    50
    Plugin Contributions
    0

    Default Re: Using TinyMCE Editor with Zen Cart

    Hi I'm using this for the first time. Just installed it into a fresh v135 - there was no installation text with the download it that mentions adding the javascript patch outlined above - IS THIS STILL NECESSARY WITH 135 - ??

    The install went smooth and it seems to be fine, but I wanted to check on the above info (including the permissions info) and confirm that it still relevant. Most mods include an installation text file...

    thanks /mark

 

 
Page 1 of 4 123 ... LastLast

Similar Threads

  1. Setting up styles with the tinymce editor
    By KismetDesign in forum All Other Contributions/Addons
    Replies: 1
    Last Post: 30 Dec 2010, 06:11 PM
  2. Using Linkpoint/YourPay API module with Zen Cart Zen Cart 1.3.0.1
    By mars22 in forum Built-in Shipping and Payment Modules
    Replies: 4
    Last Post: 23 Oct 2010, 11:57 AM
  3. TinyMCE editor does something odd with image URLs
    By kachana in forum All Other Contributions/Addons
    Replies: 2
    Last Post: 19 Sep 2010, 07:17 AM
  4. The Define Pages Editor (HTMLarea) is that using TinyMce?
    By IllusionGuy in forum General Questions
    Replies: 2
    Last Post: 17 Jul 2007, 08:23 PM
  5. using TinyMCE as the default editor
    By knewbill in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 11 Aug 2006, 05:19 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR