Force CKEDITOR to stop unwrapping blocks

Question

Let's say I have a block markup of:

<div class="block">
    <a href="/">
        <div class="divInside"></div>
        <img src="/bla" />
        <p>Parargraph</p>
    </a>
</div>

HTML5: states that the <a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".

So what I have here is perfectly valid is it not ? Why does ckeditor keep reformatting my source, example, the above, once I change beween the rich editor and source mode does the following:

<div class="block">
    <div class="divInside">
        &nbsp;
    </div>
    <a href="/"><img src="/bla" /> </a>
    <p>
        <a href="/">Parargraph</a>
    </p>
    <a href="/"> </a>
</div>

I have no problem with what it does to the empty div, but what's doing with the anchors is very annoying.

Is there a way to disable this?

Answer 1

For future people coming to this with the same issue, I did come up with a solution but I'm not overly happy about it as there should be an option for this as it's PERFECTLY valid in HTML5

In your config.js file, add in the following config setting:

config.protectedSource.push(/[\r|\n]|(<a([^*>]+>)|<\/a>)/g);

Here's a demo of the regex working: DEMO

Basically all we're doing here is:

1. Finds new lines \r
2. Finds new rows \n
3. Finds any opening anchors: <a followed by an text until we come to > - (<a([^*>]+>)
4. Finds closing anchor tags <\/a>

This regex will stop validing the found results, I'm sure there's a better way to do this as I'm not regexPERT (<-- good at puns though!)

Hope this helps