html editor "auto-correct" keeps messing with my code?

Topics: Administration, Core, General, Troubleshooting
May 6, 2014 at 7:56 AM
Edited May 6, 2014 at 8:00 AM
Hi,
For my website I need to create a download link. It contains an Icon and two lines of text. Like this:

<a href="downloads/awesome.zip" style="padding: 20px 40px; background-color: darkblue; color: white; border: 1px solid white;">
    <img src="images/download.png" alt="download" style="float: left;"/>
    <p style="font-size: 24px;">Download Awesome v0.42</p>
    <p style="font-size: 16px;">for Windows</p>
</a>
The html editor does not seem to like this (perfectly valid) html and moves the </a> tag around so it looks like this:
<p><a href="downloads/awesome.zip" style="padding: 20px 40px; background-color: darkblue; color: white; border: 1px solid white;"></a><a href="downloads/awesome.zip" style="padding: 20px 40px; background-color: darkblue; color: white; border: 1px solid white;"> <img src="images/download.png" alt="download" style="float: left;" /></a></p>
<p style="font-size: 24px;">Download Awesome v0.42</p>
<p style="font-size: 16px;">for Windows</p>
So I got 2 questions:

1.) WTH? Why would an html editor mess with my code in the first place??

2.) How can I disable this "auto-correct" stuff? It hinders me to put some basic markup into my page.

Thank you.
May 6, 2014 at 7:21 PM
Could be nice if it work, I will try.thanks
May 8, 2014 at 4:16 PM
No chance, I tested this setting and no effect, on <a> or <span> :(
May 8, 2014 at 6:30 PM
You can use: "cleanup: false" having the risk of invalid html
May 8, 2014 at 7:17 PM
Edited May 8, 2014 at 7:18 PM
TintMCE is really a pain...as this is not configurable by contentitem, I prefer changing for flavor text or a basic but wotking telerik implementation just for the pages containing bootstrap syntaxe...and wait some progress in tinyMCE. With the generalized usage of bootstrap I hope more people will raise the priority of this bug.
May 8, 2014 at 8:02 PM
I have to agree about TinyMCE. As far as Telerik, my only concern is this: http://www.telerik.com/forums/kendo-ui-editor-greek-characters. Hopefully TinyMCE4 will do the job fine.
May 9, 2014 at 8:42 AM
Thank you for your answers so far, keep em coming!

I tried the suggested "valid_children" solution, but as CSADNT already stated, it had no effect. The setting for valid children was [] by default, which to me looks like "permit everything", but is agnored anyway :/

There are two settings that might be helpful with this problem, "cleaup" and "verify_html":
http://www.tinymce.com/wiki.php/Configuration3x:cleanup
http://www.tinymce.com/wiki.php/Configuration3x:verify_html

Cleanup seems to be slated to be discontinued, though.
varify_html seems to do what I want/need, can anybody elaborate on that? (I'm currently on the road and can't test in on my Orchard myself until next week.)
May 16, 2014 at 3:09 PM
Edited May 16, 2014 at 3:11 PM
If it could help somebody, I noticed that TCE was suppressing sequences of
<a href="https://xxx.com" target="_blank">
                        <i class="fa fa-google-plus youtube-footer wow bounce" data-wow-delay="0.4s"></i>
                    </a>
but simply adding &zwnj; in the last <i></i> solved the issue
like this

``<a href="https://plus.google.com/+datwendo" target="_blank">
                    <i class="fa fa-google-plus youtube-footer wow bounce" data-wow-delay="0.4s">&zwnj;</i>
                </a>`
```
May 17, 2014 at 3:39 PM
Nice next week I try it. Great.