TinyMCE scrubbing HTML in Umbraco

2
votes

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 the page so the plugin doesn't work. I've followed Allow any markup in the tinymce editor with no effect. Can I stop TinyMCE scrubbing my HTML?

EDIT: I've reproduced the problem at http://fiddle.tinymce.com/BNcaab

Try pasting the code below into the HTML editor, then saving and clickig the HTML editor again.

<a class="accordion-toggle down" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
    <h4>Slide 1</h4>
    <span class="accordion-arrow"></span>
</a>
2
htmltwitter-bootstraptinymceumbracorich-text-editor

2 Answers

2
votes

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 -->
1
votes

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.