CKEDITOR stripping the anchor tag inside a button

Question

I have a piece of html code like this

<button class="login_btn"><a href="#">Login</a></button>

But when I apply CKEDITOR inline editor, it turns to

<button class="login_btn">Login</button>

I tried using

config.allowedContent = true;

and

config.extraAllowedContent = 'button(*){*};a(*){*};';

but the issue still persists. I do not want anything to be stripped.

Answer 1

CKEditor is stripping <a> from <button> because a <button> cannot contain an <a> element. Check your HTML with the HTML validator.

From the html5 button spec:

there must be no interactive content descendant.

And the interactive content page lists the anchor tag <a> as the first example.

Answer 2

If you need force fix it you can add a configuration (you can just add a line to the end of the config.js inside ckeditor folder):

CKEDITOR.dtd.button.a = 1;

It means: you allow in your editor tag <a> inside tag <button>. It works for me.

Answer 3

Have you tried using another HTML Editor, like CoffeCup or Sublime Text? I think it's just a problem with your Editor. I already tried your code and it works fine.