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,
    }
}