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 1: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, 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 12: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, 2014 at 3:39 PM
Nice next week I try it. Great.
May 19, 2014 at 11:20 AM
Just detected an issue: Whitespaces around anchors are currently trimmed, will need to look into this.