JCE / TinyMCE - Keeps attempting to Fix Valid & Invalid HTML

Question

Of all the Joomla editors we've used, JCE has best suited our purposes and clients. But there's a few problems with the editor that can cause problems when we code something, then it's toggled to wysiwyg and the editor tries to 'fix' our perfectly valid html.

Before you go asking questions - yes, we've set it to allow all those elements JCE likes to restrict, and no, it is NOT set to validate / clean up the html. The only restrictions we have are for pasting content into the editor.

Exhibit A:

<a href="#"></a>

This will disappear on toggling editor and back. Replaced with:

<p>&nbsp;</p>

Exhibit B:

<a id="#nameofanchor"></a>

Changes to:

<p>&nbsp;</p>

Exhibit C:

<div><a id="#nameofanchor"></a></div>

Changes to:

<div>&nbsp;</div>

Exhibit D:

<a id="hello" class="link">Hello</a>

Changes to:

<p><a id="hello" class="link"></a>Hello</p>

Exhibit E:

<a href="#">
<div>
<h2>Our Work</h2>
</div>
</a>

Changes to:

<p><a href="#"></a></p>
<div>
<h2><a href="#">Our Work</a></h2>
</div>
<p>&nbsp;</p>

Now, we want to use id instead of name for our anchor, because it's valid under HTML5, whereas name technically is not. Also, in what universe is id an invalid assignment to a link?

Also, now that it's totally legit to wrap a div with links, why would JCE strip those out as well?

Is this just a setting I'm missing? Does anyone have any insight into how I can use the editor so that we can code as we need in the editor, but our clients can't wreck it simply by saving in wysiwyg?

Edit: I've tested this in chrome, firefox and safari. Don't think it's got anything to do with the browser.

Edit: I've tested this with the container settings. Both Paragraph Container & Paragraph on Enter and Div Container & Div on enter cause this. The other two, No container & Paragraph on enter, No Container & linebreak on enter, do not cause it. Problem is - I need the first setting! As much as it would be great to give clients the benefit of the doubt, they simply can't be trusted to follow instructions and add paragraph formatting to their text.

Confirmed: This also happens with TinyMCE.

So - we know what causes this - the Paragraph Container setting - now how do we get around it while keeping that setting alive?

Answer 1

I use JCE Editor on all our sites, but we have started also installing Sourcerer by NoNumbers. This gives an easy INSERT CODE button to the JCE editor that protects it from being modified.

http://www.nonumber.nl/extensions/sourcerer

Answer 2

There are some secret settings for JCE. I know the following setting stops   being added to empty divs, maybe used to clear floats, which causes line-height issues when rendered:

In the Editor Global Configuration, add:
remove_div_padding:1 
to Custom Configuration Variables. 

I would expect there are more that can control any aspect of the editor.

Answer 3

I think it must be the typography settings in: Profile -> Editor Parameters -> Typography. Try to set the Container Element & Enter Key to NoContainer & LineBreak on Enter to see if it still applies any changes to your html.

Also remember that HTML Validation setting has setting for each Editor profile and that Joomla also provides a global filter in the global configuration page set by usergroup. Make sure there are no settings there for each usergroup.

Answer 4

This behaviour isn't unique to JCE. TinyMCE behaves the same way. This behaviour may not be limited to TinyMCE, it could be a browser DOM behaviour.

JCE actually goes to the trouble of trying to keep some empty tags, the method employed is to pad with a space.

https://github.com/widgetfactory/jce-editor/blob/master/editor/tiny_mce/plugins/cleanup/editor_plugin.js