How to install CKEditor 5

Created

CKEditor 5 is a WYSIWYG rich text editor which enables writing content directly inside of web pages or online applications. Its core code is written in JavaScript and it is developed by CKSource. CKEditor is available under open source and commercial licenses.

CKEditor 5 provides every type of WYSIWYG editing solution imaginable. From editors similar to Google Docs and Medium, to Slack or Twitter like applications, all is possible within a single editing framework.

In 2018, CKEditor 5 first stable version was introduced. With its code rewritten from scratch, CKEditor 5 has a custom data model and architecture. The editor implements Operational Transformation for the tree-structured model as well as many other mechanisms which were required to create a real-time collaborative UX.

Installation

You can download the latest version of CKEditor 5 from the GitHub releases or use a CKEditor 5 CDN.

You have the following options to get CKEditor 5:

Cloning a repository

You can clone a repository from GitHub.com to your local computer.
Cloning with HTTPS URLs
git clone https://github.com/ckeditor/ckeditor5.git
Cloning with SSH URLs
git clone [email protected]:ckeditor/ckeditor5.git
Cloning with GitHub CLI
gh repo clone ckeditor/ckeditor5

Install via NPM package

Run the following command to locally install the package and its dependencies with NPM.
Downloading and installing packages locally
npm i ckeditor5
npm install ckeditor5
yarn add ckeditor5
Downloading and installing packages globally
npm i -g ckeditor5
yarn global add ckeditor5
Install Specific Version of a Package
npm install [email protected]
Bower
bower install ckeditor5

Example

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

<!-- 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>