Replace TEXTAREA with Rich Content Editor

orviwan · September 20, 2005

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other CMS systems.

http://tinymce.moxiecode.com/

I found this very easy to integrate into osCommerce 2.2-MS2.

Here's how:

1. Download TinyMCE (see above).

2. Extract the TinyMCE .zip file to a temporary location.

3. Copy the contents of the \tinymce\jscripts\tiny_mce\ folder from the temporary location to /admin/includes/javascript/tiny_mce/ on the web server.

4. Edit /admin/includes/header.php and insert the following lines before the <table> tag.

<script language="javascript" type="text/javascript" src="includes/javascript/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>

That's it, now every <TEXTAREA> within the Administration site will be automatically replaced with a powerful inline html editor.

You will see the editor when adding or editing a product, maybe in other places too.

See the TinyMCE readme or website for ways you can tweak the editor, the default settings don't do it justice.

shaytaan · September 21, 2005

http://tinymce.moxiecode.com/

I found this very easy to integrate into osCommerce 2.2-MS2.

Here's how:

1. Download TinyMCE (see above).

2. Extract the TinyMCE .zip file to a temporary location.

3. Copy the contents of the \tinymce\jscripts\tiny_mce\ folder from the temporary location to /admin/includes/javascript/tiny_mce/ on the web server.

4. Edit /admin/includes/header.php and insert the following lines before the <table> tag.
<script language="javascript" type="text/javascript" src="includes/javascript/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
That's it, now every <TEXTAREA> within the Administration site will be automatically replaced with a powerful inline html editor.

You will see the editor when adding or editing a product, maybe in other places too.

See the TinyMCE readme or website for ways you can tweak the editor, the default settings don't do it justice.

<{POST_SNAPBACK}>

Too good to be true :) :thumbsup: Thanks alot

TF Solutions · September 21, 2005

WOW!

It worked without a single issue... fantastic!

♥peterpil19 · September 21, 2005

UNBELIEVABLE!!!!!!!!!!!!!

Could not actually believe something like this would actually exist!!!!

This is a must install and EVERY one should know about it.

Seeing as I can use bullet-points or numbers now,I almost regret installing the Category Fields contribution!!!

It even lets you create ANCHORS!!!! insert IMAGES!!! LINKS!!! It's like being a child in a candystore....

Thanks for posting it orvi won, make sure to add it to the contribution section....

--Peter

orviwan · September 21, 2005

Thanks for the feedback, I'm glad you like it. I didn't write TinyMCE, I have just used it in previous projects and saw the opportunity. I will try to add this into the contributions, but I only installed osCommerce yesterday for the first time so this is all new to me :'(

TobiasP · September 22, 2005

This is really great.

It is also pretty simple to modify it to include the Image Manager from http://www.zhuo.org/htmlarea/ if you don't want to buy the Image editor from TinyMCE.

I will try to create an intruction for that later.

ChrisW123 · September 27, 2005

I can't get it to work! Copied files and sub-folders in "tinymce" to my ".../includes/javascript/" folder and added the code you posted in includes/Header.php above the <table> tag. But no go! None of the textboxes on any admin screen look different.

Did you have to do anything else to get it to work?

orviwan · September 27, 2005

I would check the permissions on the files/folders. What server is osCommerce running on?

ChrisW123 · September 27, 2005

I would check the permissions on the files/folders. What server is osCommerce running on?

I just changed the "javascript" and "tiny_mcs" folders to 777, and tiny_mcs.js to 777 but no help. My browser is setup to run Java script.

Server is a shared Unix server. Any ideas? I have other java script that works fine.

orviwan · September 28, 2005

PM me the url and I will check a few things.

demon2lima · September 28, 2005

My page loads fine but at the bottom of IE I get a page load error. The details say that TinyMCE is not defined.

orviwan · September 29, 2005

Check the contents of /admin/includes/javascript/tiny_mce/

It should contain:

> langs

> plugins

> themes

> utils

blank.htm

license.txt

tiny_mce.js

tiny_mce_popup.js

tiny_mce_src.js

demon2lima · September 29, 2005

Thanks, I figured it out minutes after placing that post. I was short a file. oops.

Chuck

www.everythingbelowretail.com

mad_princess · October 20, 2005

hihi.... How come my textarea is on top of the Rich Content Editor? Is there anyway to make my textarea BELOW the Rich Content Editor? :blush:

Thanks in advance.....

orviwan · October 20, 2005

I sent you a PM, please respond.

Thanks

Kristofor · October 21, 2005

wow, this is seriously good, it kicks the other wysiwyg editors out of the park. I have one problem I have ultra images installed and when I install this my first main product image now displays as below

Now the code that is relevent in the categories document is

<!-- // BOF: MaxiDVD Added for Ulimited Images Pack! -->

	  <tr>
	   <td class="dataTableRow" valign="top"><span class="main"><?php echo TEXT_PRODUCTS_IMAGE_NOTE; ?></span></td>
	   <?php if (WYSIWYG_USE_PHP_IMAGE_MANAGER == 'Disable') { ?>
	   <td class="dataTableRow" valign="top"><span class="smallText"><?php echo tep_draw_separator('pixel_trans.gif', '24', '15') . ' ' . tep_draw_file_field('products_image') . '<br>'; ?>
	   <?php } else { ?>
	   <td class="dataTableRow" valign="top"><span class="smallText"><?php echo '<table border="0" cellspacing="0" cellpadding="0"><tr><td class="dataTableRow">' . tep_draw_textarea_field('products_image', 'soft', '70', '2', $pInfo->products_image) . tep_draw_hidden_field('products_previous_image', $pInfo->products_image) . '</td></tr></table>';
	   } if (($HTTP_GET_VARS['pID']) && ($pInfo->products_image) != '') { ?>
		  <tr>
			<td class="dataTableRow" colspan="2" valign="top"><?php if (tep_not_null($pInfo->products_image)) { ?><span class="smallText"><?php echo tep_image(DIR_WS_CATALOG_IMAGES . $pInfo->products_image, $pInfo->products_image, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'align="left" hspace="0" vspace="5"') . tep_draw_hidden_field('products_previous_image', $pInfo->products_image) . '<br>'. tep_draw_separator('pixel_trans.gif', '5', '15') . ' <input type="checkbox" name="unlink_image" value="yes">' . TEXT_PRODUCTS_IMAGE_REMOVE_SHORT . '<br>' . tep_draw_separator('pixel_trans.gif', '5', '15') . ' <input type="checkbox" name="delete_image" value="yes">' . TEXT_PRODUCTS_IMAGE_DELETE_SHORT . '<br>' . tep_draw_separator('pixel_trans.gif', '1', '42'); ?></span><?php } ?></td>
		  </tr>
		  <tr>
			<td colspan="2"><hr></td>
		 </tr>
	   <?php } ?>
	 </tr>
 <?php
  if (ULTIMATE_ADDITIONAL_IMAGES == 'Enable') {
  ?>
	  <tr>
	   <td class="dataTableRow" valign="top"><span class="main"><?php echo TEXT_PRODUCTS_IMAGE_MEDIUM; ?></span></td>
	   <?php if (WYSIWYG_USE_PHP_IMAGE_MANAGER == 'Disable') { ?>
	   <td class="dataTableRow" valign="top"><span class="smallText"><?php echo tep_draw_separator('pixel_trans.gif', '24', '15') . ' ' . tep_draw_file_field('products_image_med') . '<br>'; ?>
	   <?php } else { ?>
	   <td class="dataTableRow" valign="top"><span class="smallText"><?php echo '<table border="0" cellspacing="0" cellpadding="0"><tr><td class="dataTableRow">' . tep_draw_textarea_field('products_image_med', 'soft', '70', '2', $pInfo->products_image_med) . tep_draw_hidden_field('products_previous_image_med', $pInfo->products_image_med) . '</td></tr></table>';
	   } if (($HTTP_GET_VARS['pID']) && ($pInfo->products_image_med) != '') { ?>
		  <tr>
			<td class="dataTableRow" colspan="2" valign="top"><?php if (tep_not_null($pInfo->products_image_med)) { ?><span class="smallText"><?php echo tep_image(DIR_WS_CATALOG_IMAGES . $pInfo->products_image_med, $pInfo->products_image_med, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'align="left" hspace="0" vspace="5"') . tep_draw_hidden_field('products_previous_image_med', $pInfo->products_image_med) . '<br>'. tep_draw_separator('pixel_trans.gif', '5', '15') . ' <input type="checkbox" name="unlink_image_med" value="yes">' . TEXT_PRODUCTS_IMAGE_REMOVE_SHORT . '<br>' . tep_draw_separator('pixel_trans.gif', '5', '15') . ' <input type="checkbox" name="delete_image_med" value="yes">' . TEXT_PRODUCTS_IMAGE_DELETE_SHORT . '<br>' . tep_draw_separator('pixel_trans.gif', '1', '42'); ?></span><?php } ?></td>
		  </tr>
		  <tr>
			<td colspan="2"><hr></td>
		 </tr>
	   <?php } ?>

	  <tr>
	   <td class="dataTableRow" valign="top"><span class="main"><?php echo TEXT_PRODUCTS_IMAGE_LARGE; ?></span></td>
	   <?php if (WYSIWYG_USE_PHP_IMAGE_MANAGER == 'Disable') { ?>
	   <td class="dataTableRow" valign="top"><span class="smallText"><?php echo tep_draw_separator('pixel_trans.gif', '24', '15') . ' ' . tep_draw_file_field('products_image_lrg') . '<br>'; ?>
	   <?php } else { ?>
	   <td class="dataTableRow" valign="top"><span class="smallText"><?php echo '<table border="0" cellspacing="0" cellpadding="0"><tr><td class="dataTableRow">' . tep_draw_textarea_field('products_image_lrg', 'soft', '70', '2', $pInfo->products_image_lrg) . tep_draw_hidden_field('products_previous_image_lrg', $pInfo->products_image_lrg) . '</td></tr></table>';
	   } if (($HTTP_GET_VARS['pID']) && ($pInfo->products_image_lrg) != '') { ?>
		  <tr>
			<td class="dataTableRow" colspan="2" valign="top"><?php if (tep_not_null($pInfo->products_image_lrg)) { ?><span class="smallText"><?php echo tep_image(DIR_WS_CATALOG_IMAGES . $pInfo->products_image_lrg, $pInfo->products_image_lrg, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'align="left" hspace="0" vspace="5"') . tep_draw_hidden_field('products_previous_image_lrg', $pInfo->products_image_lrg) . '<br>'. tep_draw_separator('pixel_trans.gif', '5', '15') . ' <input type="checkbox" name="unlink_image_lrg" value="yes">' . TEXT_PRODUCTS_IMAGE_REMOVE_SHORT . '<br>' . tep_draw_separator('pixel_trans.gif', '5', '15') . ' <input type="checkbox" name="delete_image_lrg" value="yes">' . TEXT_PRODUCTS_IMAGE_DELETE_SHORT . '<br>' . tep_draw_separator('pixel_trans.gif', '1', '42'); ?></span><?php } ?></td>
		  </tr>
		  <tr>
			<td colspan="2"><hr></td>
		 </tr>
	   <?php } ?>
	 </tr>

What i dont get is why does it only mess up the first image thing, I have lots more which it doesnt mess up. i would just like to remove it from the image area and keep it for the html area.

What should I do?

jwen · October 21, 2005

Is anyone know how to add full feasures in the edit penal ples?

ken.yong · October 24, 2005

can't help to post the followings:

THIS IS THE BEST HTML WYSIWYG EDITOR!

Kristofor · October 24, 2005

yeh I agree, but does anyone know how to fix my problem, because i dont want it in the image editing area.

orviwan · October 25, 2005

yeh I agree, but does anyone know how to fix my problem, because i dont want it in the image editing area.

Put a CSS class on the textarea you don't want to be changed into the editor.

Example of usage of the editor_deselector option:

tinyMCE.init({
...
editor_deselector : "mceNoEditor"
});

Example of usage in the HTML:

<textarea id="myarea1" class="mceNoEditor">This will be a NOT be a editor.</textarea>

<textarea id="myarea2">This will be a editor.</textarea>

http://tinymce.moxiecode.com/tinymce/docs/...deselector.html

cgourlay · October 31, 2005

hihi.... How come my textarea is on top of the Rich Content Editor? Is there anyway to make my textarea BELOW the Rich Content Editor? :blush:

Thanks in advance.....

Does anyone have a fix for this?

orviwan · October 31, 2005

hi, someone had the same problem and this was the fix they used:

I added this: theme_advanced_toolbar_location : "top" and everything is fine already.

October 31, 2005

First a note: This is excellent! Thanks so very much!!! If and when you make this an official Contrib, and I think you should, please make a note:

When using this Contribution and the Products Short Descriptions Contribution, the resulting short descriptions will be shortened by the number of html characters you add. The formatting works, but the truncation comes earlier in the visible text. Consider adding similar html code near the beginning of each description and making the truncation number bigger to capture more text.

orviwan · November 3, 2005

First a note: This is excellent! Thanks so very much!!! If and when you make this an official Contrib, and I think you should, please make a note:
When using this Contribution and the Products Short Descriptions Contribution, the resulting short descriptions will be shortened by the number of html characters you add. The formatting works, but the truncation comes earlier in the visible text. Consider adding similar html code near the beginning of each description and making the truncation number bigger to capture more text.

Ok, I will mention that when I get my contribution ready.

The way I did short descriptions was to take the first 3 lines of the description, so it doesnt need a specific character length.

Add

pd.products_description

to

$listing_sql

in /index.php

In includes/modules/product_listing.php, at the end of

case 'PRODUCT_LIST_NAME':

before the

break;

			if($listing['products_description']!='') {
		  $sDesc = str_replace("<br>", "\n", $listing['products_description']);
		  $aDesc = split("\n", $sDesc);
		  $sDesc = "<br>" . $aDesc[0] . "<br>" . $aDesc[1] . "<br>" . $aDesc[2];
		  $lc_text .= $sDesc;
		}

It displays 3 lines of the description beflow the product name.

November 4, 2005

Hi,

I am having one little problem ...

In the admin when I put an image path in like:

http://www.designhosting.biz/assets/bg_body.jpg the image shows up in the store admin editor box plus on the website.

When I put an image path in like:

http://www.designhosting.biz/catalog/images/bg_body.jpg the image shows up in the store admin edit box but does not show up on the website ... there is just a blank image that shows up.

Example is here:

http://www.designhosting.biz/catalog/produ...&products_id=11

You will see that the dead image path excludes the "catalog" folder which was clearly put in the path in the admin editor box.

Any ideas on this?

Thanks!

Replace TEXTAREA with Rich Content Editor

Recommended Posts

orviwan

shaytaan

TF Solutions

♥peterpil19

orviwan

TobiasP

ChrisW123

orviwan

ChrisW123

orviwan

demon2lima

orviwan

demon2lima

mad_princess

orviwan

Kristofor

jwen

ken.yong

Kristofor

orviwan

cgourlay

orviwan

Guest

orviwan

Guest

Archived

Browse

Activity