1

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.

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.

  • I'm confused, do you have to assign config.extraAllowedContent somewhere? I set config.allowedContent = true; in ckeditor/edit/Full but that doesn't fix this particular issue. Also Advanced Content Filter is Disabled in those settings. – AlxVallejo Jul 24 '15 at 14:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.