[Contribution] *TinyMCE WYSIWYG HTML EDITOR

[killkenny]

So I didn't actually have to buy the image manager plugin!?! That's really annoying. I really should do more research before I just jump into these things!

 

Anyway, thanks for the install guide, although I'm not sure that you would want it in your header.php file. Ideally the code should only be put in the categories.php file and whatever others are used for mails etc. I think they are newsletters.php and mail.php. Am I correct or does it need to be in the header.php for some reason? I certainly have been known to be wrong in the past :)

[Guest]

Hey this is a really nice contrib, but does anyone have a link to a decent HOWTO about using the editor to create nice quality HTML newsletters? I have installed the mod and have played with it, but it certainly is not really intuitive on how to go about creating nice html messages with it.

 

Any ideas appreciated.

 

- mark

[djrino]

Hi rbted

i have followed your steps but not work

do you can help plese

many tnx

[rbted]

Hi rbted

i have followed your steps but not work

do you can help plese

many tnx

 

Hi there djrino check this,

 

Did you copy the files in the propher place like this (example for tiny_mce.js)

 

admin/includes/javascript/tiny_mce/tiny_mce.js

 

Did you copy the code on the right spot in admin/includes/header.php here is a copy of mine

<?php
/*
 $Id: header.php,v 1.19 2002/04/13 16:11:52 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2002 osCommerce

 Released under the GNU General Public License
*/

 if ($messageStack->size > 0) {
echo $messageStack->output();
 }
?>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr>
<td><?php echo tep_image(DIR_WS_IMAGES . 'oscommerce.gif', 'osCommerce', '204', '50'); ?></td>
<td align="right"><!--<?php echo '<a href="http://www.oscommerce.com" target="_blank">' . tep_image(DIR_WS_IMAGES . 'header_support.gif', HEADER_TITLE_SUPPORT_SITE, '50', '50') . '</a>  <a href="' . tep_catalog_href_link() . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_ONLINE_CATALOG, '53', '50') . '</a>  <a href="' . tep_href_link(FILENAME_DEFAULT, '', 'NONSSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_administration.gif', HEADER_TITLE_ADMINISTRATION, '50', '50') . '</a>'; ?>  --></td>
 </tr>
 <tr class="headerBar">
<td class="headerBarContent">  <?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, '', 'NONSSL') . '" class="headerLink">' . HEADER_TITLE_TOP . '</a>'; ?></td>
<td class="headerBarContent" align="right"><?php echo '<a href="http://www.oscommerce.com" class="headerLink">' . HEADER_TITLE_SUPPORT_SITE . '</a>  |  <a href="' . tep_catalog_href_link() . '" class="headerLink">' . HEADER_TITLE_ONLINE_CATALOG . '</a>  |  <a href="' . tep_href_link(FILENAME_LOGOFF, '', 'SSL') . '" class="headerLink">' . HEADER_LOGOFF . '</a>'; ?>  </td>
 </tr>
</table>
<!-- TinyMCE -->
<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",
	theme : "advanced",
	plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zo
om,flash,searchreplace,print,paste,directionality,fullscreen,noneditable,contextm
enu",
	theme_advanced_buttons1_add_before : "save,newdocument,separator",
	theme_advanced_buttons1_add : "fontselect,fontsizeselect",
	theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor,l
iststyle",
	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,flash,advhr,separator,print,separator,ltr,rtl,separator,ful
lscreen",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	plugin_insertdate_dateFormat : "%Y-%m-%d",
	plugin_insertdate_timeFormat : "%H:%M:%S",
	extended_valid_elements : "hr[class|width|size|noshade]",
	file_browser_callback : "fileBrowserCallBack",
	paste_use_dialog : false,
	theme_advanced_resizing : true,
	theme_advanced_resize_horizontal : false,
	theme_advanced_link_targets : "_something=My somthing;_something2=My somthing2;_something3=My somthing3;",
	apply_source_formatting : true,
		  editor_deselector : "mceNoEditor"
});

function fileBrowserCallBack(field_name, url, type, win) {
	var connector = "../../filemanager/browser.html?Connector=connectors/php/connector.php";
	var enableAutoTypeSelection = true;

	var cType;
	tinymcpuk_field = field_name;
	tinymcpuk = win;

	switch (type) {
		case "image":
			cType = "Image";
			break;
		case "flash":
			cType = "Flash";
			break;
		case "file":
			cType = "File";
			break;
	}

	if (enableAutoTypeSelection && cType) {
		connector += "&Type=" + cType;
	}

	window.open(connector, "tinymcpuk", "modal,width=600,height=400");
}
</script>
<!-- /TinyMCE -->

 

Regards

RB

[tranqui69]

First of all: Great Work!!!

 

But I have the same problem than mdmdesingn

 

The editor works fine, but won't send mails out in html mode. My mail.php may seems not to be configured to do that. I saw the description here how to do it, but it doesn't work for me, because these tag are not available in my version. I think my mail.php is quite old. Any idea?

 

My order mails arrive but not well HTML formatted, besides the email to a client works well. Any clue?

Edited December 1, 2006 by tranqui69

[djrino]

hi rbted

 

many tnx for reply..

it dont work

i heve my tinymce on the same your dir bot i not intend becouse it not work..

i'm not a programer but look in your code

 

 

plugins : & #34;table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zo

om,flash,searchreplace,print,paste,directionality,fullscreen,noneditable,context

menu",

do you not have an error it and on the other line????

 

becouse if i put this code

 

<script language="javascript" type="text/javascript" src="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_ADMIN; ?>tiny_mce/tiny_mce.js"></script>

<script language="javascript" type="text/javascript">

tinyMCE.init({

mode : "textareas",

theme : "advanced",

plugins : "table,advhr,advimage,advlink,emotions,preview,flash,print,contextmenu",

theme_advanced_buttons1_add : "fontselect,fontsizeselect",

theme_advanced_buttons2_add : "separator,preview,separator,forecolor,backcolor",

theme_advanced_buttons2_add_before: "cut,copy,paste,separator",

theme_advanced_buttons3_add_before : "tablecontrols,separator",

theme_advanced_buttons3_add : "emotions,flash,advhr,separator,print",

theme_advanced_toolbar_location : "top",

theme_advanced_toolbar_align : "left",

theme_advanced_path_location : "bottom",

extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|v

space|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade

],font[face|size|color|style],span[class|align|style]",

external_link_list_url : "example_data/example_link_list.js",

external_image_list_url : "example_data/example_image_list.js",

flash_external_list_url : "example_data/example_flash_list.js"

});

</script>

the editor work but not with the image plugin...

 

help with this please.

 

many tnx for your reply..

[MITM]

Good afternoon all. :thumbsup:

 

I have a small problem, install tiny_mce, change: mail, newsletter, categories, ( modules.- newsletter, product_notification. ) (php) (setup). Everything ok

 

 

But when send an email in HTML, does not send it. My question is:

 

I have installed IExplorer, can be see the problem?

 

I must install HTML_WYSIWYG_SQL.sql? , or to modify something of my SQL?

 

I need to setup something,?

 

MIME = true, mail send = true, everything is ok,

 

THks

MITM

* Excuse me, my english is tooooooo bad

[MITM]

Please!!! ;)

 

I must install HTML_WYSIWYG_SQL.sql? , or to modify something of my SQL?

 

I need to setup something,?

But when send an email in HTML, does not send it.

[Speculum]

Excellent contrib!

 

I had the ../../ errors, but after a quick look at the tinymce page,

 

I set convert and relative urls false ... within the jscript ... seems to be working for me :rolleyes:

[rbted]

hi rbted

 

many tnx for reply..

it dont work

i heve my tinymce on the same your dir bot i not intend becouse it not work..

i'm not a programer but look in your code

do you not have an error it and on the other line????

 

becouse if i put this code

the editor work but not with the image plugin...

 

help with this please.

 

many tnx for your reply..

 

You allready find the problem replace all & #34; with " that shoot do the trick

 

Regards

 

Rob

[Gui]

Hello,

 

Thank you for the contrib. The editor works fine, no problems what so ever. If you make something in the editor is will send nicely formatted html.

 

However when I paste HTML code into the editor it will send the complete code and not convert it.

 

Maybe this is normal, it is after all WYSIWYG, but I hope someone can confirm this.

 

Would there be a way to paste complete code into the editor and send formated html?

 

cheers all.

 

Guy

[Gui]

*mumble*

 

I can confirm this myself. Off course it will send non-formated code if you use the WYSIWYG part.

If you would like to edit the html code or paste html code, simply click the "html" button in the editor part.

 

:rolleyes

[Guest]

Indeed a great Contri, all the compliments for these PHP-masters.

 

Install en everything went more then smoothly and i got just a small and concrete problem/question.

 

Is it possible to add a specific style (set up by myself, so not standard style of os Commerce CSS) to the styles in the editor? And ofcourse > how? :D

 

For your information, this is an example i wish to use for this:

.titel { font-family: Arial, Verdana, Tahoma; color: #7D3500; text-decoration: none; font-weight: normal; font-size: 13pt; width: 100%; }

 

I downloaded this thread and searched it thrue but didn't find this issue. So if it's here somewhere anyway, please accept my excuses.

 

Thanks in advance from the Netherlands!

[killkenny]

Is it possible to add a specific style (set up by myself, so not standard style of os Commerce CSS) to the styles in the editor? And ofcourse > how? :D

 

Hi ROBOdigi,

 

The answer to this and pretty much all the other questions in the thread(including mine :-" ) can be found here:

 

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

http://tinymce.moxiecode.com/punbb/viewforum.php?id=1

 

Specifically, the answer to your question is found here:

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

 

Of course your actual pages will also need to call in the same css.

 

Hope this helps.

[Guest]

It can't get any easier then this!

 

Worked in a flash killkenny, so tnx for the support! :D

 

Maybe someone else can use the way i did it although it's quite simple:

I added loads of styles to the osCommerce stylesheet so i didn't want them all to appear in the tinymce. Specially cause this website is not for myself but for a customer. So i just pasted the styles i needed in the tinymce in a different stylesheet and uploaded that one to the tinymce folder. So tinymce gets the styles out of that smaller stylesheet (tiny_mce/styles.css) and the shop gets the same styles out of the standard stylesheet. :thumbsup:

[killkenny]

:) Exactly the way I would have done it too.

 

Glad you came right.

[ledave]

hi there,

I just wanted to say AWESOME!!!

I've installed about 20 contributions this week end, and yours is the more easy and working just fine.

Thanks a lot.

cu

[ledave]

Problem with send email

 

when I copy the image from my website and paste into the send email page (in WYSIWYG style):

 

eg. http://shashinki.com/shop/images/imagecache/EP-P5000.jpg

 

it automatically change it to:

 

../shop/images/imagecache/EP-P5000.jpg

 

Receipant will receive the email with broken link of the images :(

 

How to correct this?

Hi there,

I have the same problem as khoking, it changes the absolute path of the image to a relative one, but not a good one.

Any fix to that? khoking, have you been able to solve it?

thanks in advance

[ledave]

hehe, please forgive me, I've posted before looking :blush:

The solution is quite simple: where you're using the tinymce, add this line

convert_urls : false

within the brackets

tinyMCE.init({

}

and that will prevent the conversion of absolute to relative paths.

Hope that will help you.

See you.

[Eszaraxe]

Is it just me who's stupid today or??

 

How should I implement this contribution to be able to change the index-page with this excellent WYSIVYG-editor?

[Patty]

hehe, please forgive me, I've posted before looking :blush:

The solution is quite simple: where you're using the tinymce, add this line

convert_urls : false

within the brackets

tinyMCE.init({

}

and that will prevent the conversion of absolute to relative paths.

Hope that will help you.

See you.

 

 

I'm having the same problem. Where to place this change you mentioned and how exactly the code should look like?

Tks for your help. :)

 

 

EDIT: Never mind. I found it. Just place it in the file where Tiny MCE is being used.

 

THe code should look like this:

mode : "textareas",
theme : "advanced",
convert_urls : "false",

Works like a charm!! Thank you! :thumbsup:

Edited March 29, 2007 by Patty

[ledave]

hi Patty,

Well you have to include that lines into the javascript brackets, with the other things you want the Tiny to do. For example, mine looks that way:

<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas",
editor_deselector : "mceNoEditor",
plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zo
om,flash,searchreplace,print,contextmenu,style",
theme_advanced_buttons1_add_before : "save,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print",
theme_advanced_buttons3_add : "styleprops",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|on
mouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js"
});
</script>

Eszaraxe, I think you misunderstand what is the function of that contrib...

It's to edit your texts (for your prodcuts descriptions or newsletters, for example), you wont be able to edit the php code of your OSC files.

[ledave]

I'm having the same problem. Where to place this change you mentioned and how exactly the code should look like?

Tks for your help. :)

EDIT: Never mind. I found it. Just place it in the file where Tiny MCE is being used.

 

THe code should look like this:

mode : "textareas",
theme : "advanced",
convert_urls : "false",

Works like a charm!! Thank you! :thumbsup:

lol, you're having the EXACT same problem as mine: asking before searching and finding the answer just after posting ;) :lol:

[Patty]

hehehe... Sorry...

But tks for the super-quick reply. :)

[Eszaraxe]

Is it not possible to use TinyMCE for the other text files that needs editing, other thatn categories, products and mail? Or is it possible to implement it in any way so all the text documents like index, privacy and conditions will be edible with the editor?