1.0.2 • Published 5 years ago
ckeditor5-build-classic-simple-upload-adapter v1.0.2
CKEditor 5 classic with Simple Upload Adapter
Note:
This is a custom build of CKEditor 5 with Simple Upload Adapter Plugin.
It is important that you use the stable branch of a build, not the master branch. The master branch might contain changes which are not yet compatible with the versions of CKEditor 5 source packages that were published on npm.
Documentation
Please check CKEditor 5 Editor official documentation:
Quick start
React
Installation
npm i @ckeditor/ckeditor5-react
npm i ckeditor5-build-classic-simple-upload-adapter
import React, { useState } from "react";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "ckeditor5-build-classic-simple-upload-adapter";
export default function MyEditor() {
const [article, setArticle] = useState();
return (
<CKEditor
editor={ClassicEditor}
data={article}
onInit={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",
// Headers sent along with the XMLHttpRequest to the upload server.
headers: {
"X-CSRF-TOKEN": "CSFR-Token",
Authorization: "Bearer <JSON Web Token>"
}
}
}}
/>
);
}
JS
Installation
npm i ckeditor5-build-classic-simple-upload-adapter
import ClassicEditor from 'ckeditor5-build-classic-simple-upload-adapter';
// Or using the CommonJS version:
// const ClassicEditor = require('ckeditor5-build-classic-simple-upload-adapter');
ClassicEditor
.create(document.querySelector('#editor'), {
simpleUpload: {
// The URL that the images are uploaded to.
uploadUrl: "http://example.com",
// 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( err => {
console.error(err.stack);
});
HTML
Installation
npm i ckeditor5-build-classic-simple-upload-adapter
<div id="editor">
<p>This is the editor content.</p>
</div>
<script src="./node_modules/ckeditor5-build-classic-simple-upload-adapter/build/ckeditor.js"></script>
<script>
ClassicEditor.create(document.querySelector("#editor"), {
simpleUpload: {
// The URL that the images are uploaded to.
uploadUrl: "http://example.com/",
// 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(err => {
console.error(err.stack);
});
</script>
Note: If you are planning to integrate CKEditor 5 deep into your application, it is actually more convenient and recommended to install and import the source modules directly (like it happens in ckeditor.js
). Read more in the Advanced setup guide.