CKEditor 5 Classic Editor Build

CKEditor 5 Classic Editor Build is a production-ready, feature-rich WYSIWYG text editor for web applications. It provides essential editing features including text formatting, block quotes, headings, lists, tables, links, images, and media embedding through a comprehensive plugin system with a classic toolbar interface.

Package Information

• Package Name: @ckeditor/ckeditor5-build-classic
• Package Type: npm
• Language: TypeScript/JavaScript
• Installation: npm install @ckeditor/ckeditor5-build-classic

Core Imports

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

For CommonJS:

const ClassicEditor = require("@ckeditor/ckeditor5-build-classic");

For browser usage via script tag:

<script src="./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
<!-- ClassicEditor is now available globally -->

Basic Usage

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

// Create editor instance
ClassicEditor
  .create(document.querySelector("#editor"), {
    toolbar: {
      items: [
        'undo', 'redo',
        '|', 'heading',
        '|', 'bold', 'italic',
        '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
        '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
      ]
    }
  })
  .then(editor => {
    window.editor = editor;
    
    // Set initial content
    editor.setData('<p>Hello <strong>world</strong>!</p>');
    
    // Get editor content
    const content = editor.getData();
    console.log(content);
  })
  .catch(error => {
    console.error('Editor initialization failed:', error);
  });

Architecture

CKEditor 5 Classic Editor Build is built around several key components:

• ClassicEditor Class: Main editor class extending ClassicEditorBase with pre-configured plugins
• Plugin System: Modular architecture with 25+ built-in plugins for different editing capabilities
• Command System: Centralized command execution for all editor operations
• Data Layer: Model-view architecture separating content structure from presentation
• UI Framework: Component-based UI system with toolbar, buttons, and other interface elements
• Configuration System: Comprehensive configuration options for customizing editor behavior

Capabilities

Editor Lifecycle

Core editor creation, destruction, state management, event system, and observable properties for initializing and controlling the editor instance.

class ClassicEditor extends ClassicEditorBase {
  static create(
    sourceElementOrData: HTMLElement | string, 
    config?: EditorConfig
  ): Promise<ClassicEditor>;
  
  destroy(): Promise<unknown>;
  focus(): void;
  
  readonly state: 'initializing' | 'ready' | 'destroyed';
  readonly id: string;
  readonly isReadOnly: boolean;
}

Editor Lifecycle

Data Management

Comprehensive data input/output operations for getting and setting editor content with support for various data formats.

interface DataController {
  setData(data: string | Record<string, string>): void;
  getData(options?: { rootName?: string }): string;
}

Data Management

Command System

Centralized command execution system providing access to all editor operations including formatting, structure, and content manipulation.

interface CommandCollection {
  get<TName extends string>(commandName: TName): Command | undefined;
  execute<TName extends string>(commandName: TName, ...commandParams: any[]): unknown;
}

interface Command {
  readonly value: unknown;
  readonly isEnabled: boolean;
  execute(...args: any[]): void;
}

Commands

Configuration System

Extensive configuration options for customizing editor behavior, toolbar setup, plugin selection, and feature-specific settings.

interface EditorConfig {
  plugins?: Array<PluginConstructor>;
  extraPlugins?: Array<PluginConstructor>;
  removePlugins?: Array<string | PluginConstructor>;
  toolbar?: ToolbarConfig;
  initialData?: string;
  language?: string | LanguageConfig;
  licenseKey?: string;
  updateSourceElementOnDestroy?: boolean;
}

Configuration

Plugin System

Modular plugin architecture with 25+ built-in plugins providing text formatting, block elements, media support, and advanced editing features.

interface PluginCollection<TEditor extends Editor> {
  get<TPlugin extends PluginInterface>(
    PluginClassOrName: PluginClassConstructor<TPlugin> | string
  ): TPlugin;
  has(PluginClassOrName: PluginClassConstructor | string): boolean;
}

Plugins

User Interface

Comprehensive UI system with toolbar, buttons, dropdowns, and other interface components for building custom editor interfaces.

interface ClassicEditorUI {
  readonly element: HTMLElement;  
  readonly view: ClassicEditorUIView;
  readonly focusTracker: FocusTracker;
  readonly componentFactory: ComponentFactory;
}

User Interface

Core Instance Properties

Access to core editor subsystems and properties for advanced integrations and custom functionality.

interface CoreProperties {
  readonly accessibility: Accessibility;
  readonly conversion: Conversion;
  readonly editing: EditingController;
  readonly keystrokes: EditingKeystrokeHandler;
  readonly locale: Locale;
  readonly t: LocaleTranslate;
}

Built-in Plugins

The Classic Editor Build includes these essential plugins:

Text Formatting: Bold, Italic, Autoformat, TextTransformation
Block Elements: Paragraph, Heading, BlockQuote, List, Indent
Media: Image (with Caption, Style, Toolbar, Upload), MediaEmbed, EasyImage, PictureEditing
Links & Tables: Link, Table (with TableToolbar)
File Management: CKBox, CKFinder, CKFinderUploadAdapter
Office Integration: PasteFromOffice
Core Features: Essentials, CloudServices

Events

interface EventInfo<TName, TReturn> {
  readonly name: TName;
  readonly path: object[];
  readonly source: object;
  return: TReturn;
  stop(): void;
  off(): void;
}

Common editor events:

• 'ready' - Fired when editor is initialized and ready
• 'destroy' - Fired when editor is being destroyed
• 'change:state' - Fired when editor state changes
• 'change:isReadOnly' - Fired when read-only mode changes

Error Handling

The editor can throw errors during:

• Initialization: Invalid configuration, missing DOM elements, plugin conflicts
• Data Processing: Invalid HTML, conversion errors, model validation failures
• Command Execution: Invalid parameters, disabled commands, permission issues
• Plugin Loading: Missing dependencies, version conflicts, initialization failures

All async operations return Promises for proper error handling:

ClassicEditor.create(element, config)
  .then(editor => {
    // Success
  })
  .catch(error => {
    console.error('Editor failed to initialize:', error);
  });

Browser Compatibility

Supports all modern browsers including Chrome, Firefox, Safari, and Edge. Requires ES6+ support. No Internet Explorer support in this version.