Potential Bug - HTML Module Editor Altering HTML When <a> Elemenets Surround Block Level Elements

[ProfessorBrett]

We recently had our website transition from EVOQ to DNN Community 9.10.02, with an additional testing environment for upgrade at 9.13.4. While editing webpages, I noticed at times that markup I had previously checked as working was no longer. I realized that the markup under the specific condition of <a> elements surrounding block level elements like <div> and <p> were being rewritten, either reversing positions, duplicating, or even triplicating itself. This bug will trigger the next time the editor is accessed.

From what I’ve read and an HTML validator I consulted, HTML 5 should allow an anchor element to surround a block.

To recreate this potential bug:

1. Using an HTML module add the following markup: <a><div><p>Test</p></div></a>
2. The markup with save and display as entered
3. Enter the editor again to see the markup altered - it should now show <div><p><a>Test</a></p></div>

In other cases, the (for example purposes, markup reduced), we saw <a><div><p>Test</p></div></a> turn into <a></a><div><p>Test</p></div><a></a> or <a></a><div><p><a>Test</a></p></div><a></a>.

Since we are not currently running the latest release, I opened a discussion here as requested. Could someone test in 9.13.6 to confirm if this bug is present?

Thank you for your time,
-Brett

[mitchelsellers]

There have not been any CKEditor updates in behavior between the environments that you are on and the current release, so I would not expect to see any changes in behavior.

It is possible you could try to modify settings in the CKEditor to limit what is being done, but I would need to do further research to see why

[thienvc]

This issue is with the default editor CKEditor, you can read the documentation to configure it to allow the A tag to wrap other tags.
Some suggestions:
https://ckeditor.com/old/forums/Support/CKEditor-wont-allow-inside
https://stackoverflow.com/questions/19825802/how-to-configure-ckeditor-to-allow-html-block-level-tags-to-be-wrapped-in-an-anc

[Timo-Breumelhof]

Please read this: https://dnncommunity.org/blogs/Post/2841/Help-DNN-CKEditor-is-cleaning-my-HTML

[ProfessorBrett]

Thank you all for your assistance. I have forwarded your replies to my developers.

[moorecreative]

Thanks Brett for the good question writeup and details, Thanks DNN Community VIPs for some great notes!

Brett, I have encountered the same issue before with another sidegrade from Evoq to DNN Community and the issue was not between differences of Evoq and DNN Community, but instead between the versions of CKEditor and updates to the latest available version.

In my experience, the end result is that the newer version of CKEditor does not abide improper code, and specifically the Anchor tag wrapped Div or Table. In syntax it is expecting and enforcing containers down to elements and not allowing it to wrap an A around a Div.

There are some old discussions at CKEdtior that describe this:

"Even though this sort of code is permitted in HTML5, CKEditor doesn't support it..."

"Note that we're not talking about an essential a11y feature here, but instead about a nice to have thing, to avoid annoyance.

It's rather uncommon (it should be at least) to make a whole block of text, headers, images, etc. a single link. Not in a content creation tool at least, which should be used to create quality content. Maybe this can happen in software used to design HTML pages, still this is bad practice for SEO purposes.

Let's remember that CKEditor is a content creation tool, not a developer tool."

• https://ckeditor.com/old/forums/CKEditor/Wrapping-content-in-anchor-tags-inside-HTML-getting-reformatted
• https://dev.ckeditor.com/ticket/9457

In my past experiences with this same issue (A around Div), clients had styles which were based on it, and we worked with them to create alternate or fallback styles to match the same look after CKEditor "fixed" the code. We also performed DB edits to modify or correct all that we could through formula find/replace, and then showed them how to avoid the edit by using the "basic text editor" when necessary.

I'll follow up with you for more details.

• Ryan

[moorecreative]

OH! and I meant to include, too, that the others made great suggestions for how to change CKEditor settings to have it stop changing code... there are also some other good CKEditor settings and addons to discuss, but they have different compromises or cons as well, so I'll review those with you as well.