osCommerse and TinyMCE font size, font family, background color, text color

If you want to add a good WYSIWYG editor to your site, TinyMCE is one of the better options out there.  You will need to download the package, unzip/untar it and upload the files to your www root directory or a sub-directory of choice.  One thing to keep in mind, is the proper path for the javascript include in your code.

In my case, I added TinyMCE to the back-end admin template in one of our client’s osCommerce sites.  You will need to manually add the javascript code to every page that requires the WYSIWYG functions.  I need to be able to edit the Categories/Products, so the code was added to /www/admin/includes/categories.php.

theme : “advanced”; turns on advanced features of the editor

theme_advanced_buttons2 : “forecolor,backcolor,fontselect,fontsizeselect”; are the properties that enable text foreground color, background color, font family and font size.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<link rel="stylesheet" type="text/css" href="includes/stylesheet.css">
<script language="javascript" src="includes/general.js"></script>
<script language="javascript" type="text/javascript" src="/jscripts/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
	mode : "textareas",
        theme : "advanced",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        convert_fonts_to_spans : true,
        gecko_spellcheck : true,
        plugins : "imagemanager,style,save,advimage,advlink,emotions,inlinepopups,media,print,contextmenu,paste,fullscreen",
        theme_advanced_buttons1 : "save,newdocument,print,cut,copy,paste,pastetext,pasteword,undo,redo,|,bold,italic,underline,strikethrough,|,help,code,fullscreen,|,styleselect,",
        theme_advanced_buttons2 : "justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,anchor,image,|,emotions,media,advhr,|,forecolor,backcolor,fontselect,fontsizeselect"
});
</script>
</head>

Leave a Reply

Your email address will not be published. Required fields are marked *