Hello,

I already seen that a lot of people had this problem and I already tried solutions I've seen in other forum's threads as well in the page http://doc.silverstripe.org/doku.php?id=tinymce&s=tinymce the problem is that they don't seem to work for me.

I am going to use { insted of open square bracket and } insted of close square bracket (Otherwise it will be stripped by codeclock ;) ).

Ok. So, I go to cms/javscript/tinymce.template.js file that is the one that teorically should set the configuration for tinymce valid elements.
Inside this file over the line 43 you can see:
valid_elements : "+a{id|rel|rev|dir|tabindex|accesskey|type|name|href|target|title|class},-strong/-b{class},-em/-i{class},-strike{class},-u{class},#p{id|dir|class|align},-ol{class},-ul{class},-li{class},br,img{id|dir|longdesc|usemap|class|src|border|alt=|title|width|height|align},-sub{class},-sup{class},-blockquote{dir|class},-table{border=0|cellspacing|cellpadding|width|height|class|align|summary|dir|id|style},-tr{id|dir|class|rowspan|width|height|align|valign|bgcolor|background|bordercolor|style},tbody{id|class|style},thead{id|class|style},tfoot{id|class|style},-td{id|dir|class|colspan|rowspan|width|height|align|valign|scope|style} ,-th{id|dir|class|colspan|rowspan|width|height|align|valign|scope|style},caption{id|dir|class},-div{id|dir|class|align}, -span{class|align},-pre{class|align},address{class|align},-h1{id|dir|class|align},-h2{id|dir|class|align},-h3{id|dir|class|align},-h4{id|dir|class|align},-h5{id|dir|class|align},-h6{id|dir|class|align},hr{class},dd{id|class|title|dir}, dl{id|class|title|dir},dt{id|class|title|dir}",
extended_valid_elements : "img{class|src|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name}"

Ok, what I exactly need is to add a onclick attribute to a link, my client asked me to know by their googleanalytics how many people has download a pdf file, and for that I need to add this code:
<a href="http://www.example.com/files/map.pdf" onClick="javascript: pageTracker._trackPageview('/downloads/map');">
The first thing I've tried is to add onclick into the +a{ stuff. It didn't work so then I search in google and find the tinymce page so I tried to change valid_elements: ... for valid_elements:*{*} theorically allowing all attributtes and html tags to be used in tinyMCE, but it didn't work.

I tried to to add invalid_elements: "", just to be sure that by default tiny disallow it but it didn't work.
The problem is that it does not strip the whole thing but just gives back: <a pageTracker._trackPageview('/downloads/map');" href="..." > changing the order also, I think there should be something wrong in how tiny strips the thing as well. I tried to to write onClick all in minus like onclick and it didn't solve it. I tried changing extended_valid_elements and all kind of combinations you can imagine between the three attributes I talked about.

I know I could try to keep it out from the editor by trying to make a special template, anyway I think it has no sense to make a special template just when I need a onClick, mainly because:
- What happen if I need it in more than one page, Do I have to make one template for each link?
- The link is in the middle of text, so should I create then 2 boxes one for previous and another for after text?
- What happen if in the future I have n links that needs onclick in one page, I have to make n+1 boxes for the text? Having multiple boxes may cause problems with tags as well.
- Is it really necessary to implement any class to handle this? In any case implementing it would be a hard implementation wich I think it should not be needed just for a onclick attribute.
So IMO it has no sense to do it as a new template when it is a attribute that html handles.

I would appreciate any kind of help or any tip anyone can give me.

Thank you in advance,
Daniel

Hi Daniel,

have you found any solution to this issue?

I'm trying to add some javascript in the TinyMCE.
I use SS 2.3.1 and there is no
valid_elements :
in the cms/javscript/tinymce.template.js at all!!!

If I switch verify_html : to false nothing changes.
It would be nice to solve this...

Thanks,
Tomas

Hi Tomas,

I'm sorry but I could not find the source of the problem, so I made an extra template just for that page, maybe because the problem is not related with silverstripe but with tidy (I don't think so), noone from the staff helped with the problem, I don't know. I just gave up.

In any case this problem is a mess and I think that it should be fixed to guarantee that silverstripe has the power and flexibility.
I hope someday someone from the staff can take a look at this problem (and to other issues I've found), so I can trust in using Silverstripe for all my projects some day (I see this day quite far).

Cheers and good luck with solving the problem,
Daniel.

Hi ramos

If you find issues with SilverStripe, be sure to check if they exist in the BugTracker (http://open.silverstripe.com) and if not, create a ticket for the issue/bug/request. I guess that's the better option, if you want your problems to be taken care of by the developers.

On a side-note: You could also have solved this with a workaround. Maybe using the "rel" attribute of a link. Eg.

<a href="http://www.example.com/files/map.pdf" rel="/downloads/map"> 

And then use jQuery to apply a onclick event handler on all links that have the rel attribute set. There you would basically call pageTracker._trackPageview( ..contents of rel attribute .. );

One might argue, that using the rel attribute for this may not be semantically correct, but it's the attribute that would be suited best for this purpose IHMO.

Oh yeah, a small addition to my previous post and something that will help both Daniel and Thomas:
The culprit here is the jsparty/tiny_mce_improvements.js file. There you'll find the sapphiremce_cleanup function that seems to clean up content in addition to the cleaning performed by tinymce. So.. in addition to allow certain elements (using valid_elements) or setting verify_html to false, you must change the tiny_mce_improvements.js file:

To enable onclick on links, you should remove (comment out) this line:

value = value.replace(/([ \f\r\t\n\'\"])on[a-z]+=[^ >]+/ig, "$1");

To allow blocks of JavaScript, you have to allow comments by removing the following line:

// Word comments
value = value.replace(new RegExp('<(!--)([^>]*)(--)>', 'g'), ""); 

Why comments? Because tinymce wraps your javascript code into a comment block... the whole comment will then be stripped by the sapphiremce_cleanup function.

Hope that helps.

Hi banal,

Your help is very appreciated :-)

I just made the changes as you suggested in the jsparty/tiny_mce_improvements.js file:

function sapphiremce_cleanup(type, value) {
	if(type == 'get_from_editor') {
		// replace indented text with a <blockquote>
		//value = value.replace(/<p [^>]*margin-left[^>]*>([^\n|\n\015|\015\n]*)<\/p>/ig,"<blockquote><p>$1</p></blockquote>");
	
		// replace VML pixel image references with image tags - experimental
		value = value.replace(/<[a-z0-9]+:imagedata[^>]+src="?([^> "]+)"?[^>]*>/ig,"<img src=\"$1\">");
		
		// Word comments
		//value = value.replace(new RegExp('<(!--)([^>]*)(--)>', 'g'), ""); 
			
		// kill class=mso??? and on mouse* tags  
		value = value.replace(/([ \f\r\t\n\'\"])class=mso[a-z0-9]+[^ >]+/ig, "$1"); 
		value = value.replace(/([ \f\r\t\n\'\"]class=")mso[a-z0-9]+[^ ">]+ /ig, "$1"); 
		value = value.replace(/([ \f\r\t\n\'\"])class="mso[a-z0-9]+[^">]+"/ig, "$1"); 
		value = value.replace(/([ \f\r\t\n\'\"])on[a-z]+=[^ >]+/ig, "$1");
		value = value.replace(/ >/ig, ">"); 
	
		// remove everything that's in a closing tag
		value = value.replace(/<(\/[A-Za-z0-9]+)[ \f\r\t\n]+[^>]*>/ig,"<$1>");		
	}

Unfortunately the code I want to put in still gets commented out.
It's looks like this

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var s1 = new SWFObject("player.swf","ply","320","500","7","#000000");
s1.addParam("allowfullscreen","true");
s1.addParam("frontcolor","#ffffff");
s1.addParam("allowscriptaccess","always");
s1.addParam('wmode','opaque');
s1.addParam("flashvars","file=playlist.xml&playlist=bottom&playlistsize=240&autostart=false&controlbar=bottom&displayclick=play&repeat=always&shuffle=true&frontcolor=999999&lightcolor=C10707&backcolor=000000");
s1.write("container"); </script>

...and after the "washing" like this:

<p>
<script type="text/javascript" src="assets/Flash/swfobject.js"></script>
<br />
<script type="text/javascript"><!--
var s1 = new SWFObject("assets/Flash/player.swf","ply","320","500","7","#000000");
s1.addParam("allowfullscreen","true");
s1.addParam("frontcolor","#ffffff");
s1.addParam("allowscriptaccess","always");
s1.addParam('wmode','opaque');
s1.addParam("flashvars","file=assets/Flash/playlist.xml&playlist=bottom&playlistsize=240&autostart=false&controlbar=bottom&displayclick=play&repeat=always&shuffle=true&frontcolor=999999&lightcolor=C10707&backcolor=000000");
s1.write("container");
// --></script>
</p>

Any idea what's doing this mess?

Cheers,
Tomas

Hi Thomas

I have no clue where this "assets/Flash" is coming from. Maybe you should simply try moving your flash related assets (eg. player.swf, playlist.xml, swfobject.js) to assets/Flash... other than that, your code should work actually.

Hi banal,

ooops - yes the data is actually in the "assets/Flash" that's fine so far.
But the problem is that the "var" and "s1.add.Param" still get commented out by the TinyMCE or something else!

<!--
var s1 = new SWFObject("assets/Flash/player.swf","ply","320","500","7","#000000");
s1.addParam("allowfullscreen","true");
s1.addParam("frontcolor","#ffffff");
s1.addParam("allowscriptaccess","always");
s1.addParam('wmode','opaque');
s1.addParam("flashvars","file=assets/Flash/playlist.xml&playlist=bottom&playlistsize=240&autostart=false&controlbar=bottom&displayclick=play&repeat=always&shuffle=true&frontcolor=999999&lightcolor=C10707&backcolor=000000");
s1.write("container");
// -->

This is naughty ;-)

Cheers Tomas