# CKEditor 5 — Customizable Rich Text Editor Framework

> A modern, modular rich text editor framework written in TypeScript with a plugin-based architecture for building document editing experiences.

## Install

Save as a script file and run:

# CKEditor 5 — Customizable Rich Text Editor Framework

## Quick Use
```bash
npm install ckeditor5
```
```javascript
import { ClassicEditor, Essentials, Bold, Italic, Paragraph } from 'ckeditor5';

ClassicEditor.create(document.querySelector('#editor'), {
  plugins: [Essentials, Bold, Italic, Paragraph],
  toolbar: ['bold', 'italic']
});
```

## Introduction
CKEditor 5 is a complete rewrite of the long-running CKEditor project, built from scratch with a modern MVC architecture. It provides a framework for creating rich text editing experiences ranging from simple inline editors to full document processors. The plugin system lets developers include only the features they need.

## What CKEditor 5 Does
- Provides a rich text editing surface with formatting, lists, tables, images, and media embeds
- Supports real-time collaborative editing with operational transformation
- Offers multiple editor types: classic, inline, balloon, decoupled, and multi-root
- Handles complex content like nested tables, code blocks, and mathematical formulas
- Outputs clean HTML or a custom document model for structured content

## Architecture Overview
CKEditor 5 uses a custom data model separate from the DOM. Edits are expressed as operations on this model, which a rendering engine then maps to the view layer. This model-view separation enables features like collaborative editing, undo/redo with full operation history, and consistent cross-browser behavior. Plugins register commands, converters, and UI components through a dependency injection system.

## Self-Hosting & Configuration
- Install the base package and desired feature plugins from npm
- Use the online builder at ckeditor.com to select features and download a custom build
- Configure toolbar items, plugins, and language in the editor config object
- Integrate with React, Angular, or Vue using official wrapper packages
- Self-host all assets with no external CDN dependency

## Key Features
- Modular plugin architecture where every feature is an independent package
- Real-time collaboration support with track changes, comments, and revision history
- Paste from Word and Google Docs with formatting preserved
- Accessibility compliant with WCAG 2.1 AA standards
- Autoformat shortcuts for Markdown-like input (e.g., ## for headings)

## Comparison with Similar Tools
- **TinyMCE** — Traditional WYSIWYG editor; CKEditor 5 has a modern MVC model and deeper plugin API
- **Tiptap** — Built on ProseMirror with a Vue/React focus; CKEditor 5 offers a self-contained framework with built-in collaboration
- **Quill** — Lightweight editor with a flat document model; CKEditor 5 handles complex nested structures like tables in tables
- **Lexical** — Meta's extensible editor framework; CKEditor 5 provides more out-of-the-box features for enterprise use cases

## FAQ
**Q: Is CKEditor 5 free to use?**
A: The open-source edition is free under GPL 2+. Premium features like real-time collaboration and export to PDF require a commercial license.

**Q: Can I use it with React?**
A: Yes. The official @ckeditor/ckeditor5-react package provides a React component wrapper.

**Q: How do I add a custom plugin?**
A: Create a class extending Plugin, define commands and converters, and register it in the editor config's plugins array.

**Q: Does it support Markdown input and output?**
A: Yes. The Markdown plugin enables Markdown as both an input shortcut and an output format.

## Sources
- https://github.com/ckeditor/ckeditor5
- https://ckeditor.com/docs/ckeditor5/latest/

---
Source: https://tokrepo.com/en/workflows/asset-72b13a5a
Author: Script Depot