What HTML attributes are allowed in a Tumblr post? (TinyMCE)

Question

When I create a Tumblr message and use the HTML editor option, when I add certain HTML attributes to the elements, a TinyMCE-enabled text editor deletes almost everything.

i.e. this is:

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

becomes the following:

 <span class="something"> 

and this does not change:

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

Can I either 1) disable this cleanup (which is ridiculous, at least as it is currently implemented), or 2) get a list of all valid attributes so that I can choose the best semantic choice?

Answer 1

That killed me too. And a google search for any tumblr dev will help more complex than “how to change the text color”, oy vey. I would not wish this to anyone.

Tumblr users have no control over the html or js that launch the control panel, and therefore cannot add files that modify the TinyMCE configuration. But you can just turn it off. On the Dashboard tab of the Tumblr Settings you will find the Text Editor section. Choosing a simple html or Markdown will disable TinyMCE and allow you to publish forms, data attributes, and any non-white list of html for your hearty content.

Answer 2

1) Cutoff elements can be disabled using the following tinymce cleanup:false, initialization parameter cleanup:false,

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

To save data-random as a span attribute, 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]", //... 

Answer 3

Using Markdown sounds like a good alternative, but I read somewhere that he has problems with built-in iframes. If this works for you, then it's fluffy. I have not tested it yet.

However, what you can do if you do not want to give up TinyMCE is the following.

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

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

Unfortunately, as soon as you close and reopen the editing window, the just launched editor will split them again, so I wrote a little Greasemonkey script that automatically sets the valid_elements values ​​when the editor is initialized.

 // ==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 = '*[*]'; }); } 

This works very well for me, but I think that in rare cases a race condition occurs between the Greasemonkey script and the actual TinyMCE initialization. I suggest that the latter should sometimes run to the first and prevent my little hacking. This has not happened the last twenty or so times when I reloaded the page, and if that happens, just reload without saving. (Maybe someone has an idea how to avoid this?)

By the way, the class attribute does not seem to be shared, so as another alternative, you can define something like .alignleft in your blog theme and use it for images. Then it will not look much in TinyMCE, but a visitor or blog will see a beautiful version.