CKEditor 5 - Classic Plus

CKEditor 5 Classic Plus is a Custom Build built on top of CKEditor 5 Build - Classic (version: 36.0.1). It adds Simple Upload Adapter, Image Resize, Font Styling and much more to the official build.

Note, If you are looking for an easy way to create a custom build of CKEditor 5, check the online builder, which allows you to easily create a custom build through a simple and intuitive UI.

What's added to the official build?

• Basic Text Styles
• Text Alignment
• Font
• Code Block
• Horizontal Line
• Simple Upload Adapter
• Image Link
• Image Resize
• Find And Replace

Quick start

React

Installation

1npm i @ckeditor/ckeditor5-react
2npm i ckeditor5-classic-plus

Usage

1import React, { useState } from "react";
2import { CKEditor } from "@ckeditor/ckeditor5-react";
3import ClassicEditor from "ckeditor5-classic-plus";
4
5export default function MyEditor() {
6  const [article, setArticle] = useState();
7  
8  return (
9    <CKEditor
10      editor={ClassicEditor}
11      data={article}
12      onReady={editor => {
13        // You can store the "editor" and use when it is needed.
14      }}
15      onChange={(event, editor) => {
16        const data = editor.getData();
17        setArticle(data);
18      }}
19      config={{
20        simpleUpload: {
21          // The URL that the images are uploaded to.
22          uploadUrl: "http://example.com",
23          
24          // Enable the XMLHttpRequest.withCredentials property if required.
25          withCredentials: true,
26
27          // Headers sent along with the XMLHttpRequest to the upload server.
28          headers: {
29            "X-CSRF-TOKEN": "CSFR-Token",
30            Authorization: "Bearer <JSON Web Token>"
31          }
32        }
33      }}
34    />
35  );
36}

CKEditor 5 React documentation: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

Simple upload adapter documentation: https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/simple-upload-adapter.html

JS

Installation

1npm i ckeditor5-classic-plus

Usage

1import ClassicEditor from 'ckeditor5-classic-plus';
2
3// Or using the CommonJS version:
4// const ClassicEditor = require('ckeditor5-classic-plus');
5
6ClassicEditor
7  .create(document.querySelector('#editor'), {
8  simpleUpload: {
9      // The URL that the images are uploaded to.
10      uploadUrl: "http://example.com",
11      
12      // Enable the XMLHttpRequest.withCredentials property if required.
13      withCredentials: true,
14
15      // Headers sent along with the XMLHttpRequest to the upload server.
16      headers: {
17        "X-CSRF-TOKEN": "CSFR-Token",
18        Authorization: "Bearer <JSON Web Token>"
19      }
20    }
21  })
22  .then(editor => {
23    window.editor = editor;
24  })
25  .catch(error => {
26    console.error('There was a problem initializing the editor.', error);
27  });

HTML

Installation using NPM

1npm i ckeditor5-classic-plus

OR You may use the CDN

jsDelivr

1https://cdn.jsdelivr.net/npm/ckeditor5-classic-plus@36.0.1/build/ckeditor.js

OR

UNPKG

1https://unpkg.com/ckeditor5-classic-plus@36.0.1/build/ckeditor.js

Usage

1<div id="editor">
2  <p>This is the editor content.</p>
3</div>
4<script src="./node_modules/ckeditor5-classic-plus/build/ckeditor.js"></script>
5
6<!--Using CDN-->
7<!--<script src="https://unpkg.com/ckeditor5-classic-plus@36.0.1/build/ckeditor.js"></script>-->
8
9<script>
10  ClassicEditor.create(document.querySelector("#editor"), {
11    simpleUpload: {
12      // The URL that the images are uploaded to.
13      uploadUrl: "http://example.com/",
14      
15      // Enable the XMLHttpRequest.withCredentials property if required.
16      withCredentials: true,
17
18      // Headers sent along with the XMLHttpRequest to the upload server.
19      headers: {
20        "X-CSRF-TOKEN": "CSFR-Token",
21        Authorization: "Bearer <JSON Web Token>"
22      }
23    }
24  })
25  .then(editor => {
26    window.editor = editor;
27  })
28  .catch(error => {
29    console.error('There was a problem initializing the editor.', error);
30  });
31</script>

CKEditor 5 official documentation

• Installation for how to install this package and what it contains.
• Basic API for how to create an editor and interact with it.
• Configuration for how to configure the editor.