What HTML attributes are allowed on a Tumblr post? (tinymce)

Question

When creating a Tumblr post, and using the HTML editor option, when I add specific HTML attributes to elements, the TinyMCE rich text editor strips nearly everything off.

i.e. this:

<span class="something" data-random="foobar">

becomes this:

<span class="something">

and this is unaffected:

<span class="something" title="foobar">

So can I either 1) disable this scrubbing (which is ridiculous, at least how it's currently implemented) or 2) get a list of all valid attributes so I can choose the best semantic choice?

Answer 1

This was killing me too. And searching google for any tumblr dev help more complicated than "how do I edit text color", oy vey. I wouldn't wish it on anyone.

Tumblr users don't have any control of the html or js that runs the control panel, and so can't add any files that alter TinyMCE configuration. But you can just turn it off. In the Dashboard tab of your Tumblr settings, you'll find a Text Editor section. Selecting plain html or Markdown will deactivate TinyMCE and allow you to post forms, data attributes, and any non-whitelist html to your heart's content.

Answer 2

Using Markdown sounds like a good alternative, but I’ve read somewhere that it has problems with embedded iframes. If it works for you, then that’s fluffy. I haven’t tested it yet.

However, what you can do if you don’t want to forgo TinyMCE is the following.

tinymce.activeEditor.schema.setValidElements('*[*]')

This tells the active editor that now all elements are valid.

Unfortunately, as soon as you close and reopen the edit window, the freshly started editor will strip them again, so I wrote a little Greasemonkey script that sets the valid_elements automatically at the initialization of the editor.

// ==UserScript==
// @name        Lift TinyMCE tag restrictions
// @namespace   http://claviger.net
// @include     *.tumblr.com/*
// @version     1
// @grant       none
// ==/UserScript==

if (typeof tinyMCE !== 'undefined') {
    tinyMCE.onAddEditor.add(function(mgr, ed) {
        ed.settings.valid_elements = '*[*]';
    });
}

It works pretty well for me, but I think in rare cases there’s a race condition going on between the Greasemonkey script and the actual initialization of TinyMCE. I assume the latter must sometimes run before the first and thwart my little hack. It hasn’t happened the last twenty or so times I reloaded the page, though, and if it happens, just reload without saving. (Maybe someone has an idea how to avoid this?)

By the way, the class attribute doesn’t seem to get stripped, so as another alternative, you could define something like .alignleft in your blog’s theme and use it for the images. Then it wouldn’t look like much in TinyMCE, but the visitor or the blog would see the pretty version.

Answer 3

1) Stripping elements can be turned off using the following tinymce init parameter cleanup:false,

2) The default definition of valid html elmements can be found here: http://www.tinymce.com/wiki.php/Configuration:valid_elements

In order to keep data-random as an attribute of span you will need to set the valid_children init parameter as follows

valid_children: "body[p|ol|ul|hr]" +
",span[a|b|i|u|sup|sub|img|data-random|#text]" +
",a[span|b|i|u|sup|sub|img|#text]", //...