CKEditor 5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.

Description

CKEditor 5 is an ultra-modern JavaScript rich text editor with MVC architecture, custom data model and virtual DOM. It provides every type of WYSIWYG editing solution imaginable with extensive collaboration support. From editors similar to Google Docs and Medium, to Slack or Twitter like applications, all of which is possible within a single editing framework. As a market leader, it is constantly expanded and updated. Headless mode, HTML & Markdown support, @Mentions, Export to PDF/Word, Revision history and many others among available features.

Programming language: JavaScript

License: GNU General Public License v3.0 or later

Tags: Editors     TypeScript     Wysiwyg     JavaScript     Angular     React     Richtext     Vue.js    

Latest version: v35.2.1

README

CKEditor 5

CKEditor 5 is an ultra-modern JavaScript rich text editor with MVC architecture, custom data model and virtual DOM. It is written from scratch in ES6 and has excellent webpack support. It provides every type of WYSIWYG editing solution imaginable with extensive collaboration support. From editors similar to Google Docs and Medium, to Slack or Twitter like applications, all of which is possible within a single editing framework. As a market leader, it is constantly expanded and updated.

Table of contents

• Quick start
  • CKEditor 5 Online builder
  • CKEditor 5 predefined builds
  • Other CKEditor 5 installation methods
• Documentation and FAQ
• Releases
• CKEditor 5 features
• Contributing and project organization
  • Ideas and discussions
  • Development
  • Reporting issues and feature requests
• License

Quick start

CKEditor 5 Online builder

The easies way to start using CKEditor 5 will all the functions and features you need, is preparing a customized build with the Online builder. All you need to do is choose the preferred predefined build as a base, add all the required plugins and download the ready package that can be then used out of the box. Refer to the Online builder Quick start guide to follow this installation path.

CKEditor 5 predefined builds

CKEditor 5 predefined builds are a set of ready-to-use rich text editors. Every such build provides a single type of editor with a set of features and a default configuration.

The following CKEditor 5 predefined builds are currently available:

• Classic editor
• Inline editor
• Balloon editor
• Balloon block editor
• Document editor

Example installation

Creating an editor using a CKEditor 5 build is very simple and can be described in two steps:

1. Load the desired editor via the <script> tag.
2. Call the static create() method to create the editor.

In your HTML page add an element that CKEditor should replace:

<div id="editor"></div>

Load the classic editor build (you can choose between CDN, npm and zip downloads):

<script src="https://cdn.ckeditor.com/ckeditor5/<version>/classic/ckeditor.js"></script>

Call the ClassicEditor.create() method:

<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>

You’re ready to go!

To find out how to start with other builds check the Predefined builds guide in the CKEditor 5 documentation.

CKEditor 5 advanced installation

For more advanced users, or those who need to integrate CKEditor 5 with their own applications, we have prepared several other, advanced methods to do it. You can integrate the editor from source, use DLL builds or utilize some of the pre-made integrations with popular JavaScript frameworks, like Angular, React or Vue.

CKEditor 5 Framework

CKEditor 5 builds allow you to quickly and easily initialize one of the many types of editors in your application. At the same time, CKEditor 5 is also a framework for creating custom-made rich text editing solutions.

To find out how to start building your own editor from scratch go to the CKEditor 5 Framework overview section of CKEditor 5 documentation.

Documentation and FAQ

An extensive, vast documentation dedicated to all thing CKEditor 5-related is available handy. You will find basic guides that will help you kick off your project, advanced deep-dive tutorials to tailor it your specific needs and help sections with solutions and answers to any of your possible questions. To find out more see the following CKEditor 5 documentation sections:

• Installing CKEditor 5
• CKEditor 5 features documentation
• CKEditor 5 examples
• Updating CKEditor 5
• Getting CKEditor 5 support
• CKEditor 5 Framework documentation
• API documentation

For FAQ please go to the CKEditor Ecosystem help center. For a high-level overview of the project see the CKEditor Ecosystem website.

Releases

Follow the CKEditor 5 changelog for release details and check out the CKEditor 5 release blog posts on the CKSource blog for important release highlights and additional information.

Editing and collaboration features

The CKEditor 5 Framework offers access to plethora of various plugins, supporting all kinds of editing features.

From collaborative editing support providing comments and tracking changes, through editing tools that let users control the content looks and structure such as tables, lists, font styles, to accessibility helpers and multi-language support - CKEditor 5 is easily extendable and customizable. Special duty features like Markdown input and output and source editing, or export to PDF and Word provide solutions for users with diverse and specialized needs and demands. Images and videos are easily supported and CKEditor 5 offers various upload and storage systems to manage these.

The number of options and the easiness of customization and adding new ones makes the editing experience even better for any potential environments and professional backgrounds.

Refer to the CKEditor 5 Features documentation for details.

Contributing and project organization

Ideas and discussions

The development repository of CKEditor 5 is located at https://github.com/ckeditor/ckeditor5. This is the best place for bringing opinions and contributions. Letting the core team know if they are going in the right or wrong direction is great feedback and will be much appreciated!

Development

CKEditor 5 is a modular, multi-package, monorepo project. It consists of several packages that create the editing framework, based on which the feature packages are implemented.

The ckeditor5 repository is the place that centralizes the development of CKEditor 5. It bundles different packages into a single place, adding the necessary helper tools for the development workflow, like the builder and the test runner. Basic information on how to set up the development environment can be found in the documentation.

See the official contributors' guide to learn how to contribute your code to the project.

Reporting issues and feature requests

Each repository handles its issues independently. However, it is recommended to report issues in this repository unless you know to which specific repository the issue belongs.

Read more on the Getting support guide.

License

Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md file or https://ckeditor.com/legal/ckeditor-oss-license.