If you’re using Silverstripe and you’re an experienced web developer you’ll notice, at some point, that there are some objects you can’t add into the HTML window of the editor. It’s not Silverstripe causing this, it’s TinyMCE. There are a list of snippets you are allowed to add and anything else will be removed. It’s easy to fix this, since I know you want to. I have discovered two methods. The first I found searching the web, must be for an earlier version of Silverstripe cause the file location and name didn’t match my install.
Earlier Version
Open file located here: cms/javascript/tinymce.template.js
Find:
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]"
Replace with:
valid_elements : "*[*]"
Current Version (Silverstripe v2.3.2)
Open file located here: cms/code/LeftAndMain.php
Find:
'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|style],-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]"
Replace with:
'valid_elements' => "*[*]"
That should do it for you, now you’ll be able to add in your style tags and whatever else you need.
Additional Information
For adding actions to your elements, such as “onclick”, many of the posts on the silverstripe forums recommend the use of a javascript library, like jQuery, to tie actions to your elements.
For Instance, if you have a link you need to tie an onclick function to, it’s as simple as this:
$(function() { // same as "$(document).ready(function() {" only shorter. Serves as "onload"
$('a').click(function() {
functionName(); // This function will run every time an is clicked. You can be more specific by assigning a class to the and changing your selector to $('a.class')
});
});}
Hello
I’ve been very interested by you article and I tried the 2.3.0 way doing things but There is something I’m unable to achieve in the silverstripe html editor is to use the or tag
Any idea
Thank you
When you say ‘or’ are you referring to ‘or’ as part of an ‘if’ statement or something like that? I’ve never tried putting javascript in TinyMCE but I doubt it’ll work.
Hi
My fingers betrayed me (damn !)
In fact I want to add a paypal button as up now I only succeded in insterting a simple paypal button by adding an other tags to the valid_element line.
But I need to add and and it doesn’t work even if I allow everything with you trick.
maybe you have an idea
Thanks anyway
Here is my paypal form :
PAYS
France métropolitaine €6,00
Dom-Tom et Étranger €8,00
I just realised that the tags I was puuting in the comment where taken of ;
So What I meant is that The editor eventought I have allowed everything is removng the following tags :
select
option
Do you have any clue ?
T
Hmmm…not sure. I have been able to add form elements before after the edits to tinyMCE. I’ve seen forms in lots of silverstripe sites. Perhaps there’s something built into silverstripe for it.
Cant find this on v2.3.4, but it works with the _config.php in mysite. But Silverstripe eats things like “onclick” :/
I haven’t had the “pleasure” of searching for it in 2.3.4 yet. If I have a chance today I’ll put it on my local machine and see if I can figure it out. As far as I can recall I never had any more problems with HTML in the interface after the changes above. I can’t, however, say for sure that I tried things like onclick specifically.
Seems like a lot of folks are recommending that you use something like jQuery for handling the click function of your HTML elements. Makes sense to me too. I’ll add that as an edit to this post.
Just an FYI, in version 2.3.6, this information is in the _config.php file in the cms directory. Had to grep it to find out – there are two other locations in the jsparty directory, but they don’t affect the tinymce window when editing, it must be for something else.
Swwet, thanks for the update