CKEditor links wrap the contents of a container individually instead of a container

Question

I'm in a situation where I want to use WYSIWYG with CKEditor because of the easy Media integration. However, I'm building a page with some interactive tabs that have markup something like this:

(#1)

<div class="tab-wrapper">
    <div id="tab1" class="tab">
        <div class="image-wrapper">
            [[Media markup to insert an image]]
        </div>
        <p class="tab-text">Some text.</p>
    </div>
    <div id="tab2" class="tab">
        <div class="image-wrapper">
            [[Media markup to insert an image]]
        </div>
        <p class="tab-text">Some text.</p>
    </div>
</div>

I want to wrap each of these tabs with a link, this being the desired end result:

(#2)

<div class="tab-wrapper">
    <a href="/somepage">
        <div id="tab1" class="tab">
            <div class="image-wrapper">
                [[Media markup to insert an image]]
            </div>
            <p class="tab-text">Some text.</p>
        </div>
    </a>
    <a href="/someotherpage">
        <div id="tab2" class="tab">
            <div class="image-wrapper">
                [[Media markup to insert an image]]
            </div>
            <p class="tab-text">Some text.</p>
        </div>
    </a>
</div>

If I try to do this in CKEditor, however, I get this:

(#3)

<div class="tab-wrapper">
    <div id="tab1" class="tab">
        <div class="image-wrapper">
            <a href="/somepage">[[Media markup to insert an image]]</a>
        </div>
        <p class="tab-text"><a href="/somepage">Some text.</a></p>
    </div>
    <div id="tab2" class="tab">
        <div class="image-wrapper">
            <a href="/someotherpage">[[Media markup to insert an image]]</a>
        </div>
        <p class="tab-text"><a href="/someotherpage">Some text.</a></p>
    </div>
</div>

This creates problems with styling and, more importantly, makes some regions of the tab unclickable. What's even more maddening is that even if I disable rich text and edit the HTML directly to #3, if I switch back to CKEditor it "corrects" the markup to #2.

Is there any way to change or otherwise prevent this behavior? I still want to use the Media module integration to insert and modify images, so I'm hesitant to simply disable CKEditor and leave it off. I can insert my images, then edit the HTML to insert my link tags properly, then save the page, but it can still break again if I go back to make changes.

I'm currently running CKEditor version 3.6.6.7689, WYSIWYG module 7.x-2.2, Media 7.x-2.0-alpha3, and the latest Drupal 7 core.

Answer 1

The CKEDitor by default restricts the HTML you can use to what it considers safe by means of something called the advanced content filter (ACF). It is this feature of CKeditor that rejects your HTML-construct.

To change or otherwise prevent this behavior, you must describe the construct you want to allow by using the syntax described in the allowed content rules and assigned the JavaScript variable config.extraAllowedContent.

PS: If you Google this, you'll often see the following JavaScript suggested to "fix" to CKEDitor removing "unsafe" HTML:

config.allowedContent = true;

What the above line does it to turn ACF of completely. It will allow any valid HTML to be inserted. It is OK to do this for testing and debugging, but it is not recommended that you do this on a production site.