Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nkdas91/ckeditor5-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.
https://github.com/nkdas91/ckeditor5-classic-plus
ckeditor-react ckeditor5 ckeditor5-build ckeditor5-build-classic ckeditor5-classic-plus ckeditor5-code-block ckeditor5-custom-build ckeditor5-simple-upload-adapter rich-text-editor wysiwyg-editor-react wysiwyg-react
Last synced: about 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/nkdas91/ckeditor5-classic-plus
- Owner: nkdas91
- License: other
- Created: 2019-10-22T10:23:49.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-15T14:40:46.000Z (8 months ago)
- Last Synced: 2024-10-19T12:32:21.360Z (2 months ago)
- Topics: ckeditor-react, ckeditor5, ckeditor5-build, ckeditor5-build-classic, ckeditor5-classic-plus, ckeditor5-code-block, ckeditor5-custom-build, ckeditor5-simple-upload-adapter, rich-text-editor, wysiwyg-editor-react, wysiwyg-react
- Language: TypeScript
- Homepage: https://neerajdas.com/ckeditor5-classic-plus/
- Size: 27.6 MB
- Stars: 7
- Watchers: 0
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# CKEditor 5 - Classic Plus
***CKEditor 5 Classic Plus** is a [Custom Build](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html#creating-custom-builds) built on top of [CKEditor 5 Build - Classic](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#classic-editor) (version: 41.3.0). It adds Simple Upload Adapter, Image Resize, Font Styling and much more to the official build.*
[](https://neerajdas.com/ckeditor5-classic-plus/)
***Note,** If you are looking for an easy way to create a custom build of [CKEditor 5](https://ckeditor.com/), check the [online builder](https://ckeditor.com/ckeditor-5/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](https://ckeditor.com/docs/ckeditor5/latest/features/basic-styles.html)
- [Text Alignment](https://ckeditor.com/docs/ckeditor5/latest/features/text-alignment.html)
- [Font](https://ckeditor.com/docs/ckeditor5/latest/features/font.html)
- [Code Block](https://ckeditor.com/docs/ckeditor5/latest/features/code-blocks.html)
- [Horizontal Line](https://ckeditor.com/docs/ckeditor5/latest/features/horizontal-line.html)
- [Simple Upload Adapter](https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/simple-upload-adapter.html)
- [Image Link](https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html#linking-images)
- [Image Resize](https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html#resizing-images)
- [Find And Replace](https://ckeditor.com/docs/ckeditor5/latest/features/find-and-replace.html)
## Quick start
### React
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 (
{
// 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](https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/react.html)
[Simple upload adapter documentation](https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/simple-upload-adapter.html)
### JS
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);
});
```
### HTML
Installation using NPM
```bash
npm i ckeditor5-classic-plus
```
OR You may use the CDN
jsDelivr
```bash
https://cdn.jsdelivr.net/npm/[email protected]/build/ckeditor.js
```
OR
UNPKG
```bash
https://unpkg.com/[email protected]/build/ckeditor.js
```
Usage
```html
This is the editor content.
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);
});
```
## CKEditor 5 official documentation
* [Quick start](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html)
* [Editor life cycle](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/editor-lifecycle.html)
* [Configuration](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/configuration.html)