Wrapping content in anchor tags - inside HTML getting reformatted

Hello, I am trying to wrap a block of HTML content in an <a> tag, and it is getting undesirably reformatted when I save.

How I'd like it to be:

<a href="/link">
<div class="col-md-4">
<h3>Link</h3>
</div>
</a>

How it winds up:

<div class="col-md-4">
<h3><a href="/link">Link</a></h3>
</div>

I'd like the entire block to be a link and not just the h3 tag. Any help would be much appreciated!

Tue, 10/14/2014 - 11:19

sebstefanov

Joined: 03/02/2012

Posts: 1329

Even though this sort of code

Even though this sort of code is permitted in HTML5, CKEditor doesn't support it yet. There's a bit of discussion around it. You can read more about it here...

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn

If you think you found a bug in CKEditor, read this!

Tue, 10/14/2014 - 11:31

skidude22

Joined: 28/04/2012

Posts: 7

Thanks sebsefanov, glad it's not just me. Is there any way to hack in the ability to allow what I'm going for? Otherwise, it will be impossible to format my pages with CKEditor if it reformats the code every time I reopen the editor.

I've tried:

$( 'textarea.wysiwyg-advanced' ).ckeditor({
        extraAllowedContent: 'a div;a span;a i;a h1;a h2;a h3;a h4;a p'
});

... but that doesn't make a difference. Can you think of any possible way around this issue?

Tue, 10/14/2014 - 12:01

reinmar

Joined: 24/08/2012

Posts: 631

It's not related to the ACF,

It's not related to the ACF, so it's not a surprise that setting extraAllowedContent doesn't help. BTW. You should read the docs, because you confused many things here - starting from what ACF is and ending on the allowed content rules format.

Also, there's no way around this issue (maybe except one), because support for block-level links would be a huge architectural change (and that's why it hasn't been yet implemented). The only workaround I could think of is using config.protectedSource to replace start and end of block-level links with markers (comments). But to do that you would need to make those links discoverable by regexp, so e.g. you would need to add some comments next to thme or rename the tag to e.g. "block-a" and replace "block-a" with "a" when sending content to users on the final page.

Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+