Enabling iframe and other content in django-ckeditor-updated

One of the most used features in any Django project that allows page editing…while I have my favourite (django-summernote), I recently integrated ckeditor using the django-ckeditor-updated package from the cheeseshop.  It was an excellent choice and I was loving all the new features and extensibility.  However, I hit a stop when I wanted to insert HTML content from and ajax request I had being fired from the UI.  First of all, inserting just plain HTML is actually very easy:

CKEDITOR.instances["<id-of-ckeditor-textarea>"].insertHtml("<your-html-here>");

The fun all starts when you want to insert an iframe (or the more popular term, embedding content eg a Youtube video or for my case, a link to a Geonode map).  This is due to the Advanced Content Filter introduced in CKEditor 4.1.x. To start things off, you can check whether your editor will display iframes correctly by executing this simple JS code from your console:

CKEDITOR.instances.yourInstance.filter.check( 'iframe' );
>>> true // it's allowed

If the result is false, you can:

  • enable the mediaembed plugin in your editor instance: more info from the docs
  • extend config.extraAllowedContent to re-enable it

For the second solution, you need to add this code toy your editor’s config:

config.extraAllowedContent = 'iframe[*]'

or you can also just simply have it as:

CKEDITOR.config.allowedContent = true;

The beauty of this is you don’t have to enable the mediaembed plugin.  SO, that’s for the JS version of the plugin.  FOr Django users, this all goes into settings.py.  Mine looks something like this:


CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Full',
        'height': 300,
        'width': '100%',
        'removePlugins': 'stylesheetparser',
        'extraAllowedContent': 'iframe[*]',
    },
}

And with those simple changes, you’ll be able to insert iframe content without and problems

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s