I am using CKEditor 5, but I am facing issues when saving images. When I try to save, only the text gets saved and the images do not. The image is stored in the format “data
/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZ4AAALXCAYAAAC9wyY2AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUt”, but I need to save the image on my server and have the URL of the uploaded image returned by the server, replacing the base64 image location in the editor’s content.
My file structure is as follows:
/index.html
/ckeditor5/build/MyUploadAdapter.js
/ckeditor5/build/MyCustomUploadAdapterPlugin.js
/ckeditor5/upload.php
/ckeditor5/uploads
MyUploadAdapter.js
class MyUploadAdapter {
constructor(loader) {
// The file loader instance
this.loader = loader;
}
// Starts the upload process
upload() {
return this.loader.file
.then(file => new Promise((resolve, reject) => {
const formData = new FormData();
formData.append('file', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '../upload.php', true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.upload.addEventListener('progress', (evt) => {
if (evt.lengthComputable) {
const percentComplete = (evt.loaded / evt.total) * 100;
console.log(percentComplete);
}
});
xhr.addEventListener('load', () => {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
resolve({
default: response.url
});
} else {
reject(xhr.statusText);
}
});
xhr.addEventListener('error', () => {
reject(xhr.statusText);
});
xhr.send(formData);
}));
}
// Aborts the upload process
abort() {
if (this.xhr) {
this.xhr.abort();
}
}
}
MyCustomUploadAdapterPlugin.js
function MyCustomUploadAdapterPlugin(editor) {
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
// Return an instance of your custom upload adapter
return new MyUploadAdapter(loader);
};
}
upload.php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['file']) && $_FILES['file']['error'] === UPLOAD_ERR_OK) {
$fileTmpPath = $_FILES['file']['tmp_name'];
$fileName = $_FILES['file']['name'];
$fileSize = $_FILES['file']['size'];
$fileType = $_FILES['file']['type'];
$fileNameCmps = explode(".", $fileName);
$fileExtension = strtolower(end($fileNameCmps));
$uploadFileDir = './ckeditor5/uploads/';
if (!file_exists($uploadFileDir)) {
mkdir($uploadFileDir, 0777, true);
}
$newFileName = md5(time() . $fileName) . '.' . $fileExtension;
$dest_path = $uploadFileDir . $newFileName;
if (move_uploaded_file($fileTmpPath, $dest_path)) {
$response = [
'url' => 'https://www.fatorcor.com.br/ckeditor5/uploads/' . $newFileName
];
echo json_encode($response);
} else {
$response = [
'error' => 'There was a problem moving the uploaded file to the destination directory.'
];
echo json_encode($response);
}
} else {
$response = [
'error' => 'File upload failed.'
];
echo json_encode($response);
}
} else {
header("HTTP/1.0 405 Method Not Allowed");
echo "Method not allowed";
}
?>
index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CKEditor</title>
</head>
<body>
<textarea name="description" id="description"></textarea>
<script src="ckeditor5/build/ckeditor.js"></script>
<script src="ckeditor5/build/MyUploadAdapter.js"></script>
<script src="ckeditor5/build/MyCustomUploadAdapterPlugin.js"></script>
<script>
ClassicEditor
.create(document.querySelector('#description'), {
extraPlugins: [MyCustomUploadAdapterPlugin],
})
.catch(error => {
console.error(error);
});
</script>
</body>
</html>
Please note that I am not using Node.js, only PHP and JavaScript. I have debugged the code, and what I receive at const response = JSON.parse(xhr.responseText); is just the HTML of my own page.
Remember that I am a beginner in programming, so I do not have much practice and find some things difficult.
Could someone help me fix the image upload issue? Thank you in advance!