12 Jun, 2023
How to add image from Ckeditor using Reactjs
in this article, we will learn how to add rich text editor in React JS. CKEditor 5 allows users to create any type of content in your application, be it documents, reports, emails, notes or chat messages.
So let's get started. first we need to install it.
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
I need axios to handle api request. So install it too.
npm i axios
If you want to upload image. You need an api to store image in server.
I created an api https://playerofcode.in/api/auth/upload in get response
{
status:'success',
url:'img_url',
message:'Image uploaded successfully'
}
I used PHP CodeIgniter to create this api. you can use any backend language
I created uploadAdapter fucntion to handle image upload request.
function uploadAdapter(loader) {
return {
upload: () => {
return new Promise((resolve, reject) => {
const body = new FormData();
loader.file.then((file) => {
body.append('image', file);
axios.post(`${api_url}/${upload_endpoint}`, body, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((response) => {
// handle the response
console.log('my res', response.data.url);
resolve({ default: `${response.data.url}` })
})
.catch((error) => {
// handle errors
console.log(error);
});
})
})
}
}
}
import React, { useState } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import axios from 'axios'
const TextEditor = () => {
const [value, setValue] = useState()
const api_url = "https://playerofcode.in";
const upload_endpoint = 'api/auth/upload';
function uploadAdapter(loader) {
return {
upload: () => {
return new Promise((resolve, reject) => {
const body = new FormData();
loader.file.then((file) => {
body.append('image', file);
axios.post(`${api_url}/${upload_endpoint}`, body, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((response) => {
// handle the response
console.log('my res', response.data.url);
resolve({ default: `${response.data.url}` })
})
.catch((error) => {
// handle errors
console.log(error);
});
})
})
}
}
}
function uploadPlugin(editor) {
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
return new uploadAdapter(loader)
}
}
return (
<div className="App">
<h2>Using CKEditor 5 build in React</h2>
<CKEditor
config={{
extraPlugins: [uploadPlugin]
}}
editor={ClassicEditor}
data="<p>Hello from CKEditor 5!</p>"
onReady={editor => {
// You can store the "editor" and use when it is needed.
console.log('Editor is ready to use!', editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
setValue(data)
console.log({ event, editor, data });
}}
onBlur={(event, editor) => {
console.log('Blur.', editor);
}}
onFocus={(event, editor) => {
console.log('Focus.', editor);
}}
/>
</div>
);
}
export default TextEditor;