Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

[Contribution] TinyMCE Anywhere


Guest

Recommended Posts

This is the official support thread for the TinyMCE Anywhere contribution.

The contribution can be found here: http://www.oscommerce.com/community/contributions,4852

 

It includes:

- TinyMCE, an excellent wysiwyg editor that works in most browsers.

- iBrowser, an excellent image browser/uploader.

- Instructions to use tinyMCE anywhere on your site. (Newsletter, email, product description, product image, and more).

 

The tinyMCE configuration code is placed in a central file, so you can change the config in one place and the changes will be reflected directly everywhere you use tinyMCE.

 

An ACA module is available for ACA users.

Link to comment
Share on other sites

  • Replies 163
  • Created
  • Last Reply

Top Posters In This Topic

rigadin2 thanks for your contribution.

 

I think the instrucctions for integrate the product image in categories.php are so confused, can you explain in more detail.

 

Thanks

Rey Castillo

[email protected]

 

 

Hi

 

I got this working It may not be fully working but it is ok for me?

 

for product image I did this:

 

<?php // START tinyMCE Anywhere
if ($action == 'new_product') { // No need to put JS on all pages.
 $languages = tep_get_languages(); // Get all languages
// Build list of textareas to convert
 for ($i = 0, $n = sizeof($languages); $i < $n; $i++) {
$str.="products_description[".$languages[$i]['id']."],";
 }  //end for each language
 $mce_str = rtrim ($str,","); // Removed the last comma from the string.
// You can add more textareas to convert in the $str, be careful that they are all separated by a comma.
 echo '<script language="javascript" type="text/javascript" src="includes/javascript/tiny_mce/tiny_mce.js"></script>';
 include "includes/javascript/tiny_mce/general.php";
} // END tinyMCE Anywhere ?>

 

then added:

 

$mce_str = 'products_image';
include "includes/javascript/tiny_mce/product_image.php";

 

so it looked like this:

 

 

<?php // START tinyMCE Anywhere
if ($action == 'new_product') { // No need to put JS on all pages.
 $languages = tep_get_languages(); // Get all languages
// Build list of textareas to convert
 for ($i = 0, $n = sizeof($languages); $i < $n; $i++) {
$str.="products_description[".$languages[$i]['id']."],";
 }  //end for each language
 $mce_str = rtrim ($str,","); // Removed the last comma from the string.
// You can add more textareas to convert in the $str, be careful that they are all separated by a comma.
 echo '<script language="javascript" type="text/javascript" src="includes/javascript/tiny_mce/tiny_mce.js"></script>';
 include "includes/javascript/tiny_mce/general.php";
$mce_str = 'products_image';
include "includes/javascript/tiny_mce/product_image.php";
} // END tinyMCE Anywhere ?>

 

simon

Link to comment
Share on other sites

Great contribution, Chris. Tks for making it available. :thumbsup:

 

I'm using http://www.oscommerce.com/community/contributions,1347 the old HTML area for all my clients, but the truth is it's old and it's got some flaws, it doesn't work with Firefox. Is there an easy way to replace HTML area with TinyMCE?

 

TIA for any help.

Patty

Link to comment
Share on other sites

Sorry if the instructions for the product image are confused. I have not done it myself as I'm using a contribution that use modules instead of modifying categories.php, I just know the steps that need to be done and somebody with experience of categories.php should provide precise instructions.

 

Simon has already made the first step: adding one line in the header of the page. Maybe tinyMCE now appears for the product image but it won't work correctly. Here are next steps:

 

2) Where the file field "product_image" (or is it products_image?) is displayed, replace it with a textarea.

 

Now you should be able to choose an image using iBrowser and see it in the texarea.

 

3) When going to preview, tinyMCE will send the whole image tag (<img src=".......) so this must be filtered. A function is provided in the doc to get rid of extra tags.

 

When this is working, we can continue....

 

About Htmlarea:

The first step is to switch off htmlarea, there is a configuration parameter for that. Then tinyMCE can be installed and it will work in most places. However it is recommended to remove htmlarea everywhere it is used, to avoid confusion and extra code.

Link to comment
Share on other sites

About Htmlarea:

The first step is to switch off htmlarea, there is a configuration parameter for that. Then tinyMCE can be installed and it will work in most places. However it is recommended to remove htmlarea everywhere it is used, to avoid confusion and extra code.

 

Tks for your reply. I'll see if I can do it. :)

Patty

Link to comment
Share on other sites

Ok people, I've addes in the file:

(catalog root)\admin\includes\javascript\tiny_mce\plugins\ibrowser2\ibrowser.php on the 25th line:

 

include '../../../../configure.php';

 

and that solve my configuration problom with oscommerce.

 

notice I did not use barakes.

Link to comment
Share on other sites

I installed the Tiny MCE anywhere contribution and use the ACA module to fire it all up.

 

The problem is that I get an "error building images list" message in my Ibrowser.

The weird thing is that the browser does display the right directory list, and I know that all my directory's are chmodded right.

 

Does anyone have a solution for this?

 

Thanx in advance.

Link to comment
Share on other sites

Hi Chris,

 

I have a few questions please:

I have TINYMce showing on new product/mail and newsletter pages.

 

1) Can I have the editor only showing on the english text box in new product page.

Can you change this?

$languages = tep_get_languages(); // Get all languages

 

2) The newsletter page shows up with the editor but when I go to preview all the formatting seems to go except for colours. When I email it out I recieve only the HTML code? Which obviously looks a mess - could there be any reason for this?

The emails I recieved via 'Email' in tools showed up correctly when i viewed it - although now it seems as if it is not sending at all. I have html emails enabled.

 

3) In your file bundled with tiny_mce 'mail.php' there is a line in between these lines (taken from the readme page):

<!-- START tinyMCE Anywhere //-->
<script language="javascript" type="text/javascript"

 

which is (in your bundled file):

<?php // START tinyMCE
if ($action<>'preview') { ?>
<script language="javascript" type="text/javascript" src="includes/javascript/tiny_mce/tiny_mce.js"></script>

 

Should we include the missing line or not?

 

4) Are the loadmsg.php and popup.php needed?

 

Many Thanks

 

Becki

Link to comment
Share on other sites

2 questions

 

1 - When I use this add-on, the backgroudn of the editor (Products Description) is the backgroudn of my shop, is there a way to prevent that ?

 

2 - When I click the ibrowser, I am unable to upload anything, on the top corner of the ibrowser it says "directory error"

 

any ideas ?

Link to comment
Share on other sites

Hi Chris,

 

I have a few questions please:

I have TINYMce showing on new product/mail and newsletter pages.

 

1) Can I have the editor only showing on the english text box in new product page.

Can you change this?

$languages = tep_get_languages(); // Get all languages

 

2) The newsletter page shows up with the editor but when I go to preview all the formatting seems to go except for colours. When I email it out I recieve only the HTML code? Which obviously looks a mess - could there be any reason for this?

The emails I recieved via 'Email' in tools showed up correctly when i viewed it - although now it seems as if it is not sending at all. I have html emails enabled.

 

3) In your file bundled with tiny_mce 'mail.php' there is a line in between these lines (taken from the readme page):

<!-- START tinyMCE Anywhere //-->
<script language="javascript" type="text/javascript"

 

which is (in your bundled file):

<?php // START tinyMCE
if ($action<>'preview') { ?>
<script language="javascript" type="text/javascript" src="includes/javascript/tiny_mce/tiny_mce.js"></script>

 

Should we include the missing line or not?

 

4) Are the loadmsg.php and popup.php needed?

 

Many Thanks

 

Becki

 

Ok i manages to get the newsletter to send as html!

 

in admin/includes/modules/newsletters/newsletter.php i changed

 

$mimemessage->add_text($this->content);

to:

$mimemessage->add_html($this->content);

 

 

The preview still doesn't show with all the correct formatting? Could this be something to my question 3) above ?

 

Many thanks

Becki

Link to comment
Share on other sites

  • 2 weeks later...

First, great contrib Chris (rigadin2). I know it took a long time to get the integraton working.

 

I wanted to offer a couple of fixes that worked on a particular server (if you work on many different types of servers this might help you as one type of server might run the contrib beautifully while another server may not, as in my case). ***Note - this shop does not use a /catalog directory, all the stuff is in the document root.

 

First, when previewing new products, or previewing existing products, the images were broken [x]. When looking at the path, the images were using relative url's so the images were trying to be found in admin/images

 

tinyMCE has "relative_urls" set to true by default. Changing to false solved the problem and the images are now all called by /images/ I changed mine in the main tiny_mce.js which sets it globally. The script uses compression so when viewing it all runs together. Do a search/find on "relative_urls". You will see it set to true. Change that to false. Re-upload the script (in ASCII mode). This file: /admin/includes/javascript/tiny_mce/tiny_mce.js

Before:

"relative_urls",true

After:

"relative_urls",false

This is also a switch that you can set on the fly but you will need to read the documentation for tinyMCE to understand how to use it (configuration section of docs). My advice? If this fixes your problem it will most likely work for all instances where you need tinyMCE so it should be okay to set it globally; you can always use the "switch" to set a particular call to tinyMCE to not use relative URL's (would only apply if you wanted to use tinyMCE in an application other than OSC on the same site).

 

Second problem I had was when previewing an existing or new product, clicking the back button made any images in the product description "disappear" (the actual "back" button on the preview page). When clicking the "HTML" button in the editor, I could see that all the images were there in the code but were doubly encoded with HTML entity's and escape characters and thus, were broken (not visible at all in visual-edit). Check this code in /admin/categories.php When returning to the editor from the preview (clicking back button), it will strip the stuff that tinyMCE has added. (osCommerce strips the stuff when you are on the "preview" and when it inserts it into the database, but tinyMCE adds it back in when going back from preview).

 

Somewhere around line 569 (I have HTC installed so it may be lower, like line 550 or something) If you see this:

		  <tr>
		<td class="main" valign="top"><?php if ($i == 0) echo TEXT_PRODUCTS_DESCRIPTION; ?></td>
		<td><table border="0" cellspacing="0" cellpadding="0">
		  <tr>
			<td class="main" valign="top"><?php echo tep_image(DIR_WS_CATALOG_LANGUAGES . $languages[$i]['directory'] . '/images/' . $languages[$i]['image'], $languages[$i]['name']); ?> </td>
			<td class="main"><?php echo tep_draw_textarea_field('products_description[' . $languages[$i]['id'] . ']', 'soft', '70', '15', (isset($products_description[$languages[$i]['id']]) ? $products_description[$languages[$i]['id']] : tep_get_products_description($pInfo->products_id, $languages[$i]['id']))); ?></td>

		  </tr>
		</table></td>
	  </tr>

Change it to this:

		  <tr>
		<td class="main" valign="top"><?php if ($i == 0) echo TEXT_PRODUCTS_DESCRIPTION; ?></td>
		<td><table border="0" cellspacing="0" cellpadding="0">
		  <tr>
			<td class="main" valign="top"><?php echo tep_image(DIR_WS_CATALOG_LANGUAGES . $languages[$i]['directory'] . '/images/' . $languages[$i]['image'], $languages[$i]['name']); ?> </td>
			<td class="main"><?php echo tep_draw_textarea_field('products_description[' . $languages[$i]['id'] . ']', 'soft', '70', '15', (isset($products_description[$languages[$i]['id']]) ? stripslashes($products_description[$languages[$i]['id']]) : tep_get_products_description($pInfo->products_id, $languages[$i]['id']))); ?></td>

		  </tr>
		</table></td>
	  </tr>

 

Hope this post is useful to someone. :)

Link to comment
Share on other sites

Hello.

 

The picture browser do not work on the category page. Instead there is a text area field with the filename inside.

 

It works perfectly on on the product page.

 

Do you know why?

 

By the way, excellent contribution!!!! Makes life sooo much more easier :thumbsup:

Link to comment
Share on other sites

Hi

 

I got this working It may not be fully working but it is ok for me?

 

for product image I did this:

 

<?php // START tinyMCE Anywhere
if ($action == 'new_product') { // No need to put JS on all pages.
 $languages = tep_get_languages(); // Get all languages
// Build list of textareas to convert
 for ($i = 0, $n = sizeof($languages); $i < $n; $i++) {
$str.="products_description[".$languages[$i]['id']."],";
 }  //end for each language
 $mce_str = rtrim ($str,","); // Removed the last comma from the string.
// You can add more textareas to convert in the $str, be careful that they are all separated by a comma.
 echo '<script language="javascript" type="text/javascript" src="includes/javascript/tiny_mce/tiny_mce.js"></script>';
 include "includes/javascript/tiny_mce/general.php";
} // END tinyMCE Anywhere ?>

 

then added:

 

$mce_str = 'products_image';
include "includes/javascript/tiny_mce/product_image.php";

 

so it looked like this:

<?php // START tinyMCE Anywhere
if ($action == 'new_product') { // No need to put JS on all pages.
 $languages = tep_get_languages(); // Get all languages
// Build list of textareas to convert
 for ($i = 0, $n = sizeof($languages); $i < $n; $i++) {
$str.="products_description[".$languages[$i]['id']."],";
 }  //end for each language
 $mce_str = rtrim ($str,","); // Removed the last comma from the string.
// You can add more textareas to convert in the $str, be careful that they are all separated by a comma.
 echo '<script language="javascript" type="text/javascript" src="includes/javascript/tiny_mce/tiny_mce.js"></script>';
 include "includes/javascript/tiny_mce/general.php";
$mce_str = 'products_image';
include "includes/javascript/tiny_mce/product_image.php";
} // END tinyMCE Anywhere ?>

 

simon

Great, but where did you put it?

Link to comment
Share on other sites

Well, this almost works for me however I am receiving the following message when I press the preview button when creating a new product.

 

Fatal error: Cannot use object of type objectInfo as array in /home/gojuryun/public_html/osCommerce/catalog/admin/includes/modules/products/tinymce.php on line 92
Link to comment
Share on other sites

I want to use this with Article Manager, in the instructions it says to include this code between the <head> tags - I'm afraid I'm a bit of a newbie still and I'm not sure what changes the code requires.

 

$mce_str = YOURCODEHERE // Comma separated list of textarea names
// You can add more textareas to convert in the $mce_str, be careful that they are all separated by a comma.
 echo '<script language="javascript" type="text/javascript" src="includes/javascript/tiny_mce/tiny_mce.js"></script>';
 include "includes/javascript/tiny_mce/general.php";

 

Any help would be greatly appreciated, thanks

Link to comment
Share on other sites

Almost there, it appears to finally be working with the exception of the images. As per directions:

3.5 Product image

 

I'm using ACA (modifications to categories.php are placed in modules), so I don't have to modify the file categories.php to get tinyMCE working as a product image browser/uploader.

If you are not using ACA, the tinyMCE feature will not work out of the box, but here are hints to make it working on a normal installation.

 

1) First of all, the product image file field (tep_draw_file_field) must be changed to a textarea (tep_draw_textarea).

 

2) In categories.php, where you have already include the file general.php, add this after:

 

$mce_str = 'products_image';

include "includes/javascript/tiny_mce/product_image.php";

 

Now you should be able to use tinyMCE/iBrowser to choose your product image.

 

3) Before displaying the preview, the value of product_image post var must be filtered, so only the filename stays (tinyMCE returns the whole img tag). This function can do the trick:

function _filter_save_image ($products_image) {
  $products_image = htmlspecialchars(stripslashes($products_image));
 $products_image = ereg_replace('<img ', '', $products_image); // Remove: <img
 $products_image = ereg_replace('src=', '', $products_image); // Remove: src=
 $products_image = ereg_replace('"', '', $products_image); // Remove: "
 $products_image = ereg_replace('/>', '', $products_image); // Remove: />
 $products_image = ereg_replace(DIR_WS_CATALOG . DIR_WS_IMAGES, '', $products_image); // Remove: absolute path
 return $products_image;
}

4) When loading the image name from the DB or from the HTTP_POST_VARS (when back from preview to editor), the img tag must be added again, something like that:

 

$products_image = '<img src="'.$products_image.'" />';

 

OK so I can now use the tinyMCE and the image is showing up [kind of except until I click preview where it is a broken link]. How do I run this function or a better question is where do I run this function?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...