CKEditor 5 – Classic Plus

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

Live demo

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?

Quick start

React

npm i @ckeditor/ckeditor5-react
npm i ckeditor5-classic-plus
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 (
    <CKEditor
      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 [JSON Web Token]"
          }
        }
      }}
    />
  );
}

CKEditor 5 React documentation
Simple upload adapter documentation

JS

npm i ckeditor5-classic-plus
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 [JSON Web Token]"
      }
    }
  })
  .then(editor => {
    window.editor = editor;
  })
  .catch(error => {
    console.error('There was a problem initializing the editor.', error);
  });

HTML

npm i ckeditor5-classic-plus
https://unpkg.com/ckeditor5-classic-plus@35.0.1/build/ckeditor.js
<div id="editor">
  <p>This is the editor content.</p>
</div>
<script src="./node_modules/ckeditor5-classic-plus/build/ckeditor.js"></script>

<!--Using CDN-->
<!--<script src="https://unpkg.com/ckeditor5-classic-plus@35.0.1/build/ckeditor.js"></script>-->

<script>
  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 [JSON Web Token]"
      }
    }
  })
    .then(editor => {
      window.editor = editor;
    })
    .catch(error => {
      console.error('There was a problem initializing the editor.', error);
    });
</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.