How to preserve HTML input via wysiwyg into custom html module?

Question

I am getting strange behavior while trying to add custom html via a custom html module. My markup is getting altered and the behavior is affected as a result. I want to have an anchor tag wrapped around an image, h2, and a p tag.

<div>
    <a href="#">
        <img src="/greentec-capital.com/images/gallery/bild4.jpg">
        <h1>Title</h1>
        <p>Some text here</p>
    </a>
</div>

Once saved, the anchor tag is only wrapped around the image, which makes the menu itself unusable.

<div>
    <a href="#">
        <img src="/greentec-capital.com/images/gallery/bild4.jpg">
    </a>
    <h1>Title</h1>
    <p>Some text here</p>
</div>

From, my research this is something to do with how the html is saved from the wysiwyg editor into the database.

So, something in the saving process is opinionated about how the html should be structured. Is there someway of preventing this? I've looked into the text filtering settings, and there doesn't seem to be an obvious fix from there. I'm relatively new to joomla, but it looks like the Code Mirror and TinyMCE editors are installed on the site.

Next, if there isn't an easy fix with an editor, would coding a module solve this problem?

Answer 1

In your Joomla backend, go to Global Configuration >> Text Filters.

Under the Super User row, select No Filtering from the dropdown menu.

Answer 2

So, I didn't find out the mechanics of why this happens, but it does. I solved my problem by using this the Custom HTML Advanced module, which doesn't do any text filtering at all. Another solution would have been to use a custom module.