• Stars
    star
    7,668
  • Rank 4,956 (Top 0.1 %)
  • Language Rich Text Format
  • License
    Other
  • Created almost 10 years ago
  • Updated 11 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

CKEditor 5 Tweet

npm version Coverage Status CircleCI TypeScript Support

Join newsletter Follow Twitter

CKEditor 5 is an ultra-modern JavaScript rich-text editor with MVC architecture, a custom data model, and virtual DOM. It is written from scratch in TypeScript and has excellent webpack and Vite 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 is possible within a single editing framework. As a market leader, it is constantly expanded and updated.

A composition of screenshots presenting various features of CKEditor 5 rich text editor

Table of contents

Quick start

CKEditor 5 online builder

The easiest way to start using CKEditor 5 with all the features you need is to prepare 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-to-use package. 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 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:

Example installation

Creating an editor using a CKEditor 5 build is 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 the CDN, npm, and zip downloads):

<script src="https://cdn.ckeditor.com/ckeditor5/41.3.1/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.

TypeScript support

CKEditor 5 is a TypeScript project. Starting from v37.0.0, it offers native type definitions. Check out our dedicated guide to read more about TypeScript support.

CKEditor 5 advanced installation

For more advanced users or those who need to integrate CKEditor 5 with their applications, we have prepared several other, advanced methods to do it. You can:

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 editor from scratch go to the CKEditor 5 Framework overview section of the CKEditor 5 documentation.

Documentation and FAQ

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

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 a 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, and font styles, to accessibility helpers and multi-language support - CKEditor 5 is easily extensible 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. Images and videos are easily supported and CKEditor 5 offers various upload and storage systems to manage these.

The number of options and the ease of customization and adding new ones make the editing experience even better for any environment and professional background.

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

Report issues in the ckeditor5 repository. Read more in the Getting support section of the CKEditor 5 documentation.

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.

More Repositories

1

ckeditor4

The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.
Rich Text Format
5,789
star
2

ckeditor4-releases

Official distribution releases of CKEditor 4.
JavaScript
519
star
3

ckeditor5-react

Official CKEditor 5 React component.
JavaScript
379
star
4

github-writer

GitHub Writer - WYSIWYG Rich-Text Editor for GitHub, powered by CKEditor.
JavaScript
327
star
5

ckeditor5-vue

Official CKEditor 5 Vue.js component.
JavaScript
309
star
6

ckeditor5-angular

Official CKEditor 5 Angular 5+ component.
TypeScript
186
star
7

ckeditor5-build-classic

The classic editor build of CKEditor 5.
HTML
136
star
8

ckeditor4-docs-samples

Code samples for the official CKEditor 4 documentation (https://ckeditor.com/docs/ckeditor4/)
HTML
100
star
9

ckeditor4-react

Official CKEditor 4 React component.
TypeScript
97
star
10

ckeditor5-engine

CKEditor 5 editing engine.
JavaScript
93
star
11

ckeditor4-vue

Official CKEditor 4 Vue component
JavaScript
73
star
12

ckeditor5-design

☠ Early discussions about CKEditor 5's architecture. Closed now. Go to https://github.com/ckeditor/ckeditor5 ☠
57
star
13

ckeditor4-docs

The official documentation of CKEditor 4.
JavaScript
57
star
14

ckeditor4-angular

Official CKEditor 4 Angular component.
TypeScript
54
star
15

ckeditor5-collaboration-samples

Collaboration integration examples for CKEditor 5
JavaScript
47
star
16

editor-recommendations

A set of recommendations for modern editing solutions.
HTML
47
star
17

strapi-plugin-ckeditor

CKEditor 5 custom field for Strapi.
JavaScript
46
star
18

ckeditor5-demos

Source codes for demos available at https://ckeditor.com/ckeditor-5/demo/
JavaScript
42
star
19

hanghub

A browser extension that allows you to see the users who are connected to the same GitHub issue as you. It is available for Chrome and Firefox.
JavaScript
39
star
20

ckeditor5-dev

CKEditor 5 development tools packages.
JavaScript
35
star
21

ckeditor5-markdown-gfm

GitHub Flavored Markdown data processor for CKEditor 5.
JavaScript
30
star
22

ckeditor5-build-decoupled-document

The document build of CKEditor 5, featuring the decoupled UI editor implementation.
HTML
28
star
23

ckeditor5-inspector

CKEditor 5 inspector.
JavaScript
26
star
24

ckeditor5-vue2

Official CKEditor 5 component for Vue.js 2.x.
JavaScript
25
star
25

ckeditor5-editor-classic

Classic editor implementation for CKEditor 5.
JavaScript
23
star
26

ckeditor5-core

CKEditor 5 core editor architecture.
JavaScript
21
star
27

ckeditor5-paste-from-office

Paste from Office feature for CKEditor 5.
Rich Text Format
18
star
28

ckeditor4-presets

CKEditor 4 presets builder.
JavaScript
18
star
29

ckbuilder

The development repository of CKBuilder, a command line builder for CKEditor 4.
JavaScript
18
star
30

ckeditor5-image

Image feature for CKEditor 5.
JavaScript
18
star
31

ckeditor5-build-inline

The inline editor build of CKEditor 5.
HTML
17
star
32

ckeditor4-sdk

A set of software development tools for CKEditor 4 along with samples.
JavaScript
16
star
33

ckeditor5-table

Table feature for CKEditor 5.
JavaScript
16
star
34

ckeditor5-ui

The UI framework of CKEditor 5.
JavaScript
16
star
35

ckeditor5-ckfinder

CKFinder file browser integration for CKEditor 5.
JavaScript
15
star
36

ckeditor5-build-balloon-block

The build of CKEditor 5 featuring the balloon and block toolbars.
HTML
14
star
37

ckeditor5-tutorials-examples

JavaScript
14
star
38

ckeditor5-adapter-ckfinder

CKEditor 5's adapter to CKFinder.
JavaScript
12
star
39

ckeditor5-font

Font size and font family features for CKEditor 5.
JavaScript
12
star
40

ckeditor5-hackathon

CKEditor 5 Hackathon
JavaScript
11
star
41

ckeditor5-upload

Upload utils for CKEditor 5.
JavaScript
11
star
42

ckeditor5-react-example

Example configuration of a React app created by create-react-app@2 with CKEditor 5 used from source.
JavaScript
10
star
43

ckeditor5-media-embed

Media embed feature for CKEditor 5.
JavaScript
9
star
44

vite-plugin-ckeditor5

Vite plugin for building CKEditor 5 from source
Vue
9
star
45

ckeditor5-editor-inline

Inline editor implementation for CKEditor 5.
JavaScript
9
star
46

ckeditor5-code-block

Code blocks feature for CKEditor 5.
JavaScript
9
star
47

ckeditor5-link

Link feature for CKEditor 5.
JavaScript
8
star
48

ckeditor5-alignment

Text alignment feature for CKEditor 5.
JavaScript
8
star
49

ckeditor5-build-balloon

The editor with a balloon toolbar build of CKEditor 5.
HTML
8
star
50

ckeditor4-java-samples

The development repository of CKEditor for Java (web application).
Java
8
star
51

ckeditor5-theme-lark

Theme Lark for CKEditor 5.
CSS
7
star
52

ckeditor5-list

Lists feature for CKEditor 5.
JavaScript
7
star
53

ckeditor5-highlight

Text highlight feature for CKEditor 5.
JavaScript
6
star
54

ckeditor5-word-count

Word count feature for CKEditor 5.
JavaScript
6
star
55

ckeditor5-widget

Widget API for CKEditor 5.
JavaScript
6
star
56

ckeditor5-mention

Mention feature for CKEditor 5.
JavaScript
5
star
57

ckeditor4-webpack-template

Simple template for creating CKEditor 4 projects with Webpack.
JavaScript
5
star
58

ckeditor-boilerplate

A boilerplate for modern git based projects
JavaScript
5
star
59

ckeditor5-utils

The utils for CKEditor 5 project.
JavaScript
5
star
60

ckeditor5-editor-balloon

Editor with a balloon toolbar implementation for CKEditor 5.
JavaScript
5
star
61

labs

A place for various experiments, sample code showcased in blog posts and so on.
JavaScript
5
star
62

ckeditor4-java-core

The development repository of CKEditor 4 for Java (core).
Java
4
star
63

ckeditor4-integrations-common

JavaScript
4
star
64

ckeditor5-watchdog

Watchdog for CKEditor 5.
JavaScript
4
star
65

ckeditor5-typing

Typing feature for CKEditor 5.
JavaScript
4
star
66

ckeditor5-cloud-services

CKEditor 5's Cloud Services integration layer
JavaScript
4
star
67

ckeditor5-clipboard

Clipboard (copy, cut, paste) support for CKEditor 5.
JavaScript
4
star
68

ckeditor5-package-generator

A tool for creating a new package for CKEditor 5.
JavaScript
3
star
69

ckeditor5-ui-default

☠ This package has been merged into https://github.com/ckeditor/ckeditor5-ui ☠
JavaScript
3
star
70

ckeditor5-autosave

Autosave feature for CKEditor 5.
JavaScript
3
star
71

ckeditor5-enter

Enter feature for CKEditor 5.
JavaScript
3
star
72

ckeditor5-mermaid

JavaScript
3
star
73

ckeditor5-special-characters

Special characters feature for CKEditor 5.
JavaScript
2
star
74

ckeditor5-essentials

Presets of plugins for CKEditor 5.
JavaScript
2
star
75

ckeditor5-restricted-editing

Restricted editing feature for CKEditor 5.
JavaScript
2
star
76

ckeditor5-autoformat

Autoformat feature for CKEditor 5.
JavaScript
2
star
77

ckeditor5-linters-config

Eslint & Stylelint plugins and configurations for linting the CKEditor 5 code style.
JavaScript
2
star
78

ckeditor5-undo

Undo manager for CKEditor 5.
JavaScript
2
star
79

ckeditor5-easy-image

Easy Image feature for CKEditor 5.
JavaScript
2
star
80

ckeditor5-horizontal-line

Horizontal line feature for CKEditor 5.
JavaScript
1
star
81

vue-template-ckeditor-classic

Create Vue template for CKEditor 5 Classic
Vue
1
star
82

angular-template-ckeditor-classic

Angular CLI template for CKEditor 5 Classic
TypeScript
1
star
83

ckeditor5-page-break

Page break feature for CKEditor 5.
JavaScript
1
star
84

stylelint-config-ckeditor5

JavaScript
1
star
85

ckeditor5-remove-format

Remove Format feature for CKEditor 5.
JavaScript
1
star
86

ckeditor4-plugin-linkballoon

A simple plugin integrating Balloon Toolbar with the link feature.
JavaScript
1
star
87

ckeditor5-labs

CKEditor 5 experiments and integrations.
HTML
1
star
88

ckeditor5-block-quote

Block quote feature for CKEditor 5.
JavaScript
1
star
89

js-nation-workshop

CSS
1
star
90

eslint-plugin-ckeditor5-rules

JavaScript
1
star
91

ckeditor5-paragraph

Paragraph feature for CKEditor 5.
JavaScript
1
star
92

ckeditor5-heading

Heading feature for CKEditor 5.
JavaScript
1
star
93

eslint-config-ckeditor5

JavaScript
1
star
94

ckeditor-cloud-services-core

CKEditor Cloud Services Core API.
JavaScript
1
star
95

cra-template-ckeditor5-classic

Create React App template for CKEditor 5 Classic
JavaScript
1
star
96

ckeditor5-indent

Block indentation feature for CKEditor 5. https://ckeditor.com/ckeditor-5
JavaScript
1
star
97

workflow-tests-PR-10

1
star
98

ckeditor4-benderjs-runner-tests

Rich Text Format
1
star
99

ckeditor4-benderjs-runner

Bender.js runner for CKEditor 4
JavaScript
1
star
100

ckeditor4-workflows-common

Shared CKEditor 4 GitHub workflows.
JavaScript
1
star