CKEditor 5 is a project that allows you to quickly and easily initialize one of the many types of editors it offers in your application. At the same time, it is a framework for creating custom-tailored rich-text editing solutions. The former requirement is met thanks to the predefined CKEditor 5 builds. The latter — thanks to CKEditor 5 Framework.

CKEditor 5 Framework is a highly-flexible and universal platform that provides a set of components allowing you to create any kind of rich text editing solution. It enables the building of different, custom-tailored editors that suit specific needs. It also provides tools for the creation and integration of user-made features and for customizing existing ones.

This guide explains how the framework is built and how to start using it.

Please note that the CKEditor 5 Framework documentation is constantly updated and expanded, but it may still be lacking some things. Feel free to suggest documentation enhancements and share your feedback about the framework.

If the documentation is insufficient, do not be afraid to look into the source code of CKEditor 5 packages. For example, if you plan to create a new feature, check if a similar one already exists and try to take inspiration from its source code.

When to use the framework?

The CKEditor 5 predefined builds can be customized, but certain types of customizations require using the framework.

• Writing your own features. New features are implemented using the framework.
• Customizing existing features. Changing the behavior or look of existing features can be done thanks to the framework’s capabilities.
• Creating new types of editors. You can create new editor types using the framework.

To sum up: you need to start using the framework as soon as existing builds do not meet your requirements or cannot be customized to the extent you need.

Lists in the table

Basic features overview

Lorem ipsum dolor sit amet, consectetur adipisicing elit.₁

Basic styles

Ad alias, architecto culpa cumque dignissimos dolor eos incidunt ipsa itaque laboriosam magnam molestias nihil numquam odit quam, suscipit veritatis voluptate voluptatum.²

Image

Blockquote

Quote

• Quoted UL List item 1
• Quoted UL List item 2

Quote

Code blocks in the table

body {
	color: red;
}

p {
	font-size: 10px;
}

<?php

function dump( array ...$args ) {
	foreach ( $args as $item ) {
		var_dump( $item );
	}

	die;
}

function foo() {
	console.log( 'indented using 1 tab' );
}

function bar() {
    console.log( 'indented using spaces' );
}

Plain text

HTML embed

<details> and <summary> tags as HTML snippet