TinyMCE Extention doesn't work for IE

Vinx · October 2006

I'm using TinyMCE extention but some how its working fine on Firefox but if i access the site by IE it doesn't work. Does TinyMCE works only with Firefox ?

MySchizoBuddy · October 2006

It works for Ie as well what version of Ie are u using

Vinx · October 2006

My IE is 6.0

MySchizoBuddy · October 2006

Does it give any errors or what. I use a mac and don't have IE, so can't test it.
check this example. see if it works in IE

Vinx · October 2006

MySchizoBuddy, It seems there was some error in the javascript, I coiped the Javascript from TinyMCE examples and updated the default.php and it seemed to worked for me. Here is the code I'm using now. $Head->AddScript('js/tinymce/jscripts/tiny_mce/tiny_mce.js'); $Head->AddString(' <script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script> <script language="javascript" type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced", theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,separator,bullist,numlist,separator,undo,redo,separator,link,unlink,separator,image,separator,formatselect", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom", theme_advanced_resizing : true, theme_advanced_resize_horizontal : true, extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" }); </script>');

MySchizoBuddy · October 2006

well u changed the file. instead of tiny_mce_gzip.php, ur using tiny_mce.js the compressed version i have included (12kb), loads faster than the one on there website (137kb) :) btw ur calling the js file twice. do me a favour. can u replace tiny_mce.js with the compressed version and check if it works. So i can narrow down if its the compressed version that is creating problems or there is something wrong with my script.

Vinx · October 2006

Hi, Thanks for pointing out that script is included twice. I changed to this and it works fine and sure your gzip verion is much better and loads faster. $Head->AddScript('js/tinymce/jscripts/tiny_mce/tiny_mce_gzip.php'); $Head->AddString(' <script language="javascript" type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced", theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,separator,bullist,numlist,separator,undo,redo,separator,link,unlink,separator,image,separator,formatselect", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom", theme_advanced_resizing : true, theme_advanced_resize_horizontal : true, extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" }); </script>'); BTW, I wanted to check how to increase the font size in the test area, at present its small, i think its 8 and I would like to make it 10 Thanks for your help.

MySchizoBuddy · October 2006

in the themes_advanced_buttons1 list, enter "fontsizeselect" without the quotes that will allow u to change font size. <a href="http://tinymce.moxiecode.com/tinymce/docs/reference_buttons.html">Here</a> is the list of complete buttons u can use

Dinoboff · October 2006

I think Vinx mean that the size of of the text in the textarea is different than the one in the comment.

You need to add content_css : "/url/to/mycontent.css"
with rules in mycontent.css, that look like that if you are using the default style of vanilla:

body {
	font-family:'Trebuchet MS', 'Verdana', 'Tahoma', 'Arial', sans-serif;
	font-size:13px;
	color:#000;
	margin: 10px;
	line-height: 150%;
}

code {
	border-left: 6px solid #FFFFAA;
	background: #FFFFEE;
	padding: 8px;
	padding-left: 16px;
	display: block;
	white-space: pre;
}
...

Vinx · October 2006

Thanks guys for your help. Dinoboff, you are right thats what I was looking for, though I found it easier to modify tiny_mce/themes/advanced/css/editor_content.css and got the result i was after. I understand your method was cleaner, but couldn't get it working. body, td, pre { font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif; font-size: 13px; }

Dinoboff · October 2006

I had a problem to use it myself. I had to try differents url (and I havn't test it with friendly_url).

Wanderer · October 2006

Quote: MySchizoBuddy Does it give any errors or what. I use a mac and don't have IE, so can't test it.
check this example. see if it works in IE

Does not work in Safari either although Firefox plays well, albeit very slowly.

MySchizoBuddy · October 2006

safari is not suported by any WYSIWYG. some have partial support like tinymce. fckeditor has partial support for opera with opera 9 welcome to WYSIWYG hell :) it now works in IE Vinx u shouldn't change anything on tinymce folder. because when u upgrade ur going to loose ur changes. you should create a seperate content.css file and tell it to use that one. just like dinoboff did.

MySchizoBuddy · October 2006

Dinoboff what url did u use for the mycontent.css looking in the examples directory. the css file is in the same folder as then html file. but putting mycontent,css in the same folder as default.php doens't work

Dinoboff · October 2006

I use something like that:

...
content_css : "'. $Context->Configuration['WEB_ROOT'].'extensions/WYSIWYGeditor/styleContent.css' .'",
...

AndrewVos · November 2006

Can't get it to work in Firefox or IE7 :<

dkodr · December 2006

This is how my forum looks like in IE when I enable the TinyMCE extension:

Could you please help me fix it?

dkodr · December 2006

AFAIR there have been these kinds of problems also with other extensions, but I haven't found a solution to this problem. Hope anyone can help me...

EDIT:

Fixed the big gap problem by altering vanilla.css (removed width and float properties from #Discussions)

EDIT2:

Found this in the source:

<body id="DiscussionsPage" ><div id="Session">Zalogowany jako l!pa (<a href="/people.php?PostBackAction=SignOutNow">Wyloguj siÄ™</a>)</div><b></b><div id="Header">

I think the blank < b >< /b > tag causes the whitespace to appear. Does anyone know how to get rid of this?

---> I removed it, but it didn't fix the problem

FINAL IDEA:

Didn't want to do it this way, but I'm out of ideas:

* html #Header {
	margin-top: -20px;
	} /*style for IE*/

...and it works

MySchizoBuddy · December 2006

ur problem doesn't seem to be related to timymce. but rather vanilla on iE7

Stash · December 2006

Also, if you want to add in a hack for IE, *PLEASE* do it using MS IE Conditional Comments! Preferably in a separate IE style sheet so you can easily edit all your IE hacks in one place. Conditional Comments use a feature in Internet Explorer, not a shortcoming. This makes it safer for use in the long term than exploiting a bug.