CKEditor Table Insert, Blog Embed, YouTube Embed Enable

Introduction

When building a blog, CMS, or content-rich application, a rich text editor is essential. CKEditor is one of the most popular editors used in Django, Next.js, or any custom web application. By default, CKEditor provides basic formatting (bold, italic, headings), but advanced features like table insertion, blog/media embedding, and YouTube embedding require enabling additional plugins and configuration.

In this article, we’ll cover step-by-step how to enable these features in both CKEditor 5 and CKEditor 4, including integration tips for Django-based projects.

CKEditor 5 Setup

CKEditor 5 uses plugins for advanced functionality. To enable tables and media embeds, you need the following plugins:

• Table and TableToolbar → for inserting and editing tables
• MediaEmbed → for embedding YouTube, Vimeo, or blog/media URLs

Example Configuration

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [ Table, TableToolbar, MediaEmbed ],
    toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'insertTable', 'mediaEmbed', 'undo', 'redo' ],
    table: {
      contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
    },
    mediaEmbed: {
      previewsInData: true
    }
  })
  .catch(error => console.error(error));

Features Enabled

✅ Insert and manage tables
✅ Paste YouTube or Vimeo URLs → auto-embed
✅ Embed blog/media content with previews

CKEditor 4 Setup

If you’re using django-ckeditor or a legacy CKEditor 4 project, you need to enable extra plugins.

Example Configuration (settings.py in Django)

CKEDITOR_UPLOAD_PATH = "uploads/"

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Full',
        'extraPlugins': ','.join(['embed', 'autoembed', 'oembed', 'table']),
        'embed_provider': '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}',
        'allowedContent': True,
    }
}

Features Enabled

✅ Insert tables with CKEditor toolbar
✅ Auto-convert YouTube links into video embeds
✅ Embed blog posts via oEmbed

Security Considerations

Allowing embeds means users can insert external content, which can be risky if not properly sanitized. To keep your blog secure:

• Whitelist domains (YouTube, Vimeo, etc.)
• Sanitize HTML with libraries like bleach in Django before rendering
• Restrict iframe attributes (sandbox, allowfullscreen) for safer embedding

Example Django sanitization with bleach:

import bleach

ALLOWED_TAGS = bleach.sanitizer.ALLOWED_TAGS + ["iframe", "table", "tr", "td", "th"]
ALLOWED_ATTRIBUTES = {
    "iframe": ["src", "width", "height", "frameborder", "allow", "allowfullscreen"],
    "td": ["colspan", "rowspan"],
}

def clean_html(content):
    return bleach.clean(content, tags=ALLOWED_TAGS, attributes=ALLOWED_ATTRIBUTES)

Responsive YouTube Embeds

To ensure embedded videos look good on mobile, wrap them with a responsive container:

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

Conclusion

By enabling table insert, blog embed, and YouTube embed in CKEditor, you empower your content editors to create professional, media-rich blog posts.

• CKEditor 5: use Table and MediaEmbed plugins.
• CKEditor 4: enable embed, autoembed, oembed, and table.
• Always sanitize user-generated content for safety.

Whether you’re running a Django CMS, a Next.js blog, or any web platform, these features will greatly improve the authoring experience.