How do I prevent CKEditor 4 from stripping Google AdSense asynchronous tags?

Question

For whatever reason, CKEditor 4 is stripping Google AdSense asynchronous tags from my Full HTML text format.

What starts as this (placeholders substituted for IDs):

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<!-- Top Banner -->
<ins class="adsbygoogle"
    style="display:inline-block;width:728px;height:90px"
    data-ad-client="ca-pub-XXXXX"
    data-ad-slot="XXXXX"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Ends up as this:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<!-- Top Banner -->
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Again, this is in the Full HTML text format and I'm able to get the ins tag through without attributes, but not with attributes, even though other tags have no problems getting their attributes through to save.

For what it's worth, I do have the following set on the CKEditor profile:

config.allowedContent = true;

UPDATE

CKEditor is only stripping the ins tag (and attributes) when it's an empty tag as given by AdSense. If I add anything – a non-breaking space, even – CKEditor is preserving the ins tag and attributes.

Per tenken's suggestion, I added the following line to my config, but it didn't help.

config.protectedSource.push( /<ins class=\"adsbygoogle\" style=\".*\" data-ad-client=\".*\" data-ad-slot=\".*\"\><\/ins\>/g );

Answer 1

Have you read this blogpost (not by me) Drupal WYSYWG Module Custom CkEditor Configuration by Philip Norton.

Your <script> tags are not being stripped out, but the funky <ins> tag is. From that blog post you should be able to add a protectedSource to the AFC rules so that those elements are not stripped. This is untested but deriving from the blogpost:

// Allow Google Adsense <ins> tags, I'm being more specific
// than allowing any raw <ins> tag here. This may be too specific, but
// play with it.
config.protectedSource.push( /<ins class=\"adsbygoogle\"\>.*?<\/ins\>/g );

In order for this configuration to work you may have to install the WYSIWYG module (or append to your own ckeditor javascript profile directly).

Answer 2

This is from: http://margotskapacs.com/2014/08/taking-ckeditor-a-apart/

There is defined list of tags that is going to be removed if empty(see dtd.js and $removeEmpty). To ensure the certain empty tag are not being removed, add attribute ‘data-cke-survive’:

or pass the following to the CKEditor configuration file:

CKEDITOR.dtd.$removeEmpty['span'] = 0; CKEDITOR.dtd.$removeEmpty['TAG-NAME'] = 0;

This make the empty tags to not being removed NOTE: If you working with the production CKEditor.js, you will have to alter section starting “CKEDITOR.dtd” as following:

CKEDITOR.dtd=function(){var a=CKEDITOR.tools.extend,e=function(a,d){for(var [...] span:0//set the TAG:0 .. You will have to grep the CKEditor.js file for section starting “CKEDITOR.dtd” and then change value from 1 to 0 for each tags you like to not be removed if empty(see above example for ‘span’ tag)