Skip to content

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.

License

Notifications You must be signed in to change notification settings

nkdas91/ckeditor5-classic-plus

Folders and files

NameName
Last commit message
Last commit date
Apr 15, 2024
Apr 15, 2024
Apr 15, 2024
Apr 15, 2024
Feb 2, 2022
Apr 15, 2024
Oct 22, 2019
Feb 8, 2021
Apr 15, 2024
Apr 15, 2024
Apr 15, 2024
Apr 15, 2024
Apr 15, 2024
Apr 15, 2024
Apr 15, 2024
Apr 15, 2024

Repository files navigation

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.

Live demo button

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?

Quick start

React

Installation

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

Usage

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

Installation

npm i ckeditor5-classic-plus

Usage

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

Installation using NPM

npm i ckeditor5-classic-plus

OR You may use the CDN

jsDelivr

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

OR

UNPKG

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

Usage

<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://cdn.jsdelivr.net/npm/ckeditor5-classic-plus@41.3.0/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