TinyMCE with ImageManager v1.0
About
:
---------------------------------------------------------------
This is a combination of TinyMCE (with TinyMCE PHP compressor) and ImageManager third party plugin which is free. Have you experience the bad interface of textarea editor in Admin area of zencart? Originaly TinyMCE would not have image upload and image browse capabality when inserting image to document. This script will enable you to achieve that. I will not liable for this package and it comes without any warranty. Tested and worked with Zen-Cart v1.3.8a.
Package Contents:
---------------------------------------------------------------
TinyMCE version 3_0_6
ImageManager v1.1
TinyMCE PHP Compressor 2_0_1
Installation Instruction:
---------------------------------------------------------------
1. Extract inside /admin/ folder of the zencart, so that you will have /admin/tiny_mce
2. Copy and insert the following javascript codes in "define_pages_editor.php" inside /admin/ folder. Probably after the other javascripts and before the "</head>".
<!-- start of calls TinyMCE -->
<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",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell ,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionali ty,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycen ter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselec t",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent ,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,in sertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell, media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym, del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmous eout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
template_external_list_url : "example_template_list.js",
file_browser_callback : "fileBrowserCallBack",
debug : false,
relative_urls : true,
document_base_url : "http://localhost/zencart/"
});
</script>
<!-- end of calls -->
<!-- start of calls IMAGE MANAGER for TinyMCE -->
<script language="javascript" type="text/javascript" src="tiny_mce/plugins/ImageManager/assets/dialog.js"></script>
<script language="javascript" type="text/javascript" src="tiny_mce/plugins/ImageManager/IMEStandalone.js"></script>
<script language="javascript" type="text/javascript">
var connector = "tiny_mce/plugins/ImageManager/manager.php";
base = "G:/htdocs/zencart/images";
path = '/zencart/images';
</script>
<script language="javascript" type="text/javascript" src="tiny_mce/plugins/ImageManager/tinycall.js"></script>
<!-- end of calls -->
3. Replace the 'document_base_url : "http://localhost/zencart/"' with your zencart site url. For example: document_base_url : "http://www.abcdefg.com/myshop/"
4. Replace the 'base = "G:/htdocs/zencart/images";' with your images folder (this folder must be writable to upload new image file). For example: base= "/home/abcdefg/public_html/myshop/images";
5. Replace 'path = '/zencart/images';' with your relative path to your image/upload folder. For example: path = '/myshop/images';
6. Save the edited "define_pages_editor.php". Login to the Admin area and go to "Tools"->"Define pages editor". Repeat the process for other pages which you want to use TinyMCE.
Optional Additional Installation Step:
---------------------------------------------------------------
If you want to utilize the TinyMCE compressor you can follow the steps which available at this site:
http://wiki.moxiecode.com/index.php/...Compressor/PHP
Personally, I do not recomend this especially if you still able to view the page with tinyMCE editor within reasonable amount of time. In addition, TinyMCE will be used only in admin area which will not be accessed massively.
Bookmarks