CKEditor 5 - Classic Plus

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


!CKEditor 5 - Classic Plus sample image

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

$3

Installation

``bash
npm i @ckeditor/ckeditor5-react
npm i ckeditor5-classic-plus
`

Usage

`js
import React, { useState } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "ckeditor5-classic-plus";

export default function MyEditor() {
const [article, setArticle] = useState();

return (
editor={ClassicEditor}
data={article}
onReady={editor => {
// You can store the "editor" and use when it is needed.
}}
onChange={(event, editor) => {
const data = editor.getData();
setArticle(data);
}}
config={{
simpleUpload: {
// The URL that the images are uploaded to.
uploadUrl: "http://example.com",

// Enable the XMLHttpRequest.withCredentials property if required.
withCredentials: true,

// Headers sent along with the XMLHttpRequest to the upload server.
headers: {
"X-CSRF-TOKEN": "CSFR-Token",
Authorization: "Bearer "
}
}
}}
/>
);
}
`

CKEditor 5 React documentation

Simple upload adapter documentation

$3

Installation

`bash
npm i ckeditor5-classic-plus
`

Usage

`js
import ClassicEditor from 'ckeditor5-classic-plus';

// Or using the CommonJS version:
// const ClassicEditor = require('ckeditor5-classic-plus');

ClassicEditor
.create(document.querySelector('#editor'), {
simpleUpload: {
// The URL that the images are uploaded to.
uploadUrl: "http://example.com",

// Enable the XMLHttpRequest.withCredentials property if required.
withCredentials: true,

// Headers sent along with the XMLHttpRequest to the upload server.
headers: {
"X-CSRF-TOKEN": "CSFR-Token",
Authorization: "Bearer "
}
}
})
.then(editor => {
window.editor = editor;
})
.catch(error => {
console.error('There was a problem initializing the editor.', error);
});
`

$3

Installation using NPM

`bash
npm i ckeditor5-classic-plus
`

OR You may use the CDN

jsDelivr
`bash
https://cdn.jsdelivr.net/npm/ckeditor5-classic-plus@41.3.0/build/ckeditor.js
`

OR

UNPKG
`bash
https://unpkg.com/ckeditor5-classic-plus@41.3.0/build/ckeditor.js
`

Usage

`html



``

CKEditor 5 official documentation

* Quick start
* Editor life cycle
* Configuration