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') });
});
}

11 Comments on “Silverstripe, TinyMCE and complex HTML”

  1. Thomas says:

    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

  2. Jeremy says:

    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.

  3. thomas says:

    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

  4. Thomas says:

    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

  5. Jeremy says:

    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.

  6. Don says:

    Cant find this on v2.3.4, but it works with the _config.php in mysite. But Silverstripe eats things like “onclick” :/

  7. Jeremy says:

    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.

  8. Jeremy says:

    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.

  9. koppit says:

    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.

  10. Jeremy says:

    Swwet, thanks for the update

  11. Ariw says:

    fyi, on silverstrip 3+ this file locate in the framework > admin (_config.php)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>