TinyMCE Scrubbing HTML In Umbraco

I'm trying to use Bootstrap's collapse functionality in Umbraco, but when I edit the HTML of a page in the rich text editor (TinyMCE), the data- attributes are scrubbed when I save

Solution 1:

Umbraco has TidyHtml run after a save/publish event and unfortunately doesn't 100% sysnc with the tinyMCE valid/invalid_elements. There are a number of html5 elements and attributes that get discarded and i believe some other basic elements like <scripts> (this is for the better, i say!) and <iframes>. I can't remember the exact list of elements that tidy will squash, but this is a problem that we ran into on our latest Umbraco 4.8.11 implementation and unfortunately had to resort to disabling tidy. Disabling Tidy can be done in the [/config/umbracoSettings.config] with the following:

    <!-- clean editor content with use of tidy -->
    <TidyEditorContent>False</TidyEditorContent> <!-- gross but: http://our.umbraco.org/wiki/how-tos/customizing-the-wysiwyg-rich-text-editor-(tinymce)/allow-any-markup-in-the-tinymce-editor -->

Solution 2:

Unfortunatly, this setting is buggy: <![CDATA[*[*]]]> in the recent version of tinymce. You will have to use the config option valid_elements and set the attributes as valid there.