How to install CKEditor 5

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:

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>