djangockeditoradsensedjango-ckeditor

How to push a protectedSource in django-ckeditor?


I am currently using django-ckeditor for a site, It works great, but I need to a some In-article ads (google adsense). After saving a register the code is stripped and I don´t know where or how to set the protectedSource to allow the tag.

I have sucessfully allowed script content, but not the ins tag used by google adsense.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-XXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

My current CKEDITOR_CONFIGS definition in settings.py is like this:

CKEDITOR_CONFIGS = {
    'custom': {
        'toolbar': 'Custom',
        'extraAllowedContent':'script ins',
        'removePlugins': 'stylesheetparser',
        #'protectedSource': ['/<ins class=\"adsbygoogle\"\>.*?<\/ins\>/g'],
        'toolbar_Custom': [
            {
                'items': [
                    'RemoveFormat', 'PasteFromWord',
                ]
            },
            {
                'items': [
                    'Styles', 'Format', 'Bold', 'Italic', 'Underline',
                ]
            },
            {
                'items': [
                    'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'
                ]
            },
            {'items': ['Blockquote', 'Outdent', 'Indent']},
            {'items': ['NumberedList', 'BulletedList']},
            {
                'items': [
                    'JustifyLeft', 'JustifyCenter',
                    'JustifyRight', 'JustifyBlock'
                ]
            },
            '/',
            {'items': ['Font', 'FontSize']},
            {'items': ['Source']},
            {'items': ['Link', 'Unlink']},
            {'items': ['Image', 'Flash', 'Table', 'HorizontalRule', 'Embed']},
            {'items': ['Smiley', 'SpecialChar', 'PageBreak', 'Iframe']}

        ],
        'extraPlugins': ','.join([
            'div',
            'autoembed',
            'embedsemantic',
        ]),
        'embed_provider': '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}&api_key=abc123',
    },
    'default': {
        'toolbar': 'full',
        'removePlugins': 'stylesheetparser',
        'allowedContent': True,
    }
}


Solution

  • I finally solved the problem. I added the following lines of code:

    config.protectedSource.push( /<ins[\s|\S]+?<\/ins>/g );
    config.protectedSource.push( /<ins class=\"adsbygoogle\"\>.*?<\/ins\>/g );
    

    in the config.js file located in the folder static/ckeditor/ckeditor/ It didn´t have to do anything with CKEDITOR_CONFIGS definition but with ckeditor internal config. The end result looks like this:

    enter image description here