Stop CKEditor removing Facebook Like Box code

Question

I'm trying to paste standard Facebook's Like Box code into source view of CKEditor. But switching back to WYSIWYG mode and back to source view removes all the code. Of course the same happens when opening already saved content.

<div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

It occurs when you paste this code into official demo, too - http://ckeditor.com/demo

Seems like it's related to empty tags and non-standard attributes.

Is there any way to prevent this editor from stealing page content?

Playground on JSFiddle: http://jsfiddle.net/eKZvv/1/

Answer 1

Read about the Advanced Content Filter. There are plenty of options including disabling it and extending its settings. For example:

config.extraAllowedContent = 'div(!fb-like-box)[data-*]';

Note: the above code requires CKEditor 4.4+. In previous versions the code should look a little bit differently, because there was no wildcards support then.