Silverstripe, TinyMCE and complex HTML

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 <a>; is clicked. You can be more specific by assigning a class to the <a> and changing your selector to $('a.class') });
});
}