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

Topics: Administration, Core, General, Troubleshooting
May 6 at 8:56 AM
Edited May 6 at 9: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 at 2:19 PM
That's a well known bug in TinyMCE, since it doesn't respect the transparent content model of anchor elements in HTML5. You can add the following line to the TinyMCE config in src\Orchard.Web\Modules\TinyMce\Scripts\orchard-tinymce.js
valid_children: "+a[abbr|address|map|article|aside|audio|b|bdo|blockquote|br|canvas|cite|code|data|datalist|del|dfn|div|dl|em|fieldset|figure|footer|form|h1|h2|h3|h4|h5|h6|header|hr|i|img|ins|kbd|main|map|mark|math|meter|nav|noscript|object|ol|output|p|pre|progress|q|ruby|s|samp|script|section|small|span|strong|sub|sup|svg|table|template|time|u|ul|var|video|wbr]"

This should work, unless there is a bug in TinyMCE 3.x.

http://www.tinymce.com/wiki.php/Configuration3x:valid_children
May 6 at 8:21 PM
Could be nice if it work, I will try.thanks
May 8 at 5:16 PM
No chance, I tested this setting and no effect, on <a> or <span> :(
May 8 at 7:30 PM
You can use: "cleanup: false" having the risk of invalid html
May 8 at 8:17 PM
Edited May 8 at 8: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 at 9: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 at 9: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 at 4:09 PM
Edited May 16 at 4: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 at 1:17 PM
I've pushed my work on TinyMce 4 to a fork. It should work fine so far and I've fixed three bugs related to TinyMCE's HTML "cleanup" behaviour.
  1. Anchors can be parents of block level elements
  2. Anchors are not wrapped in paragraphs (necessary due to 1.)
  3. Empty spans and anchors are not removed
There are still some things to do, but you are more than welcome to test it.
May 17 at 4:39 PM
Nice next week I try it. Great.
May 19 at 12:20 PM
Just detected an issue: Whitespaces around anchors are currently trimmed, will need to look into this.