<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="{{adminAssets('plugins/ckeditor5-build-classic/ckeditor.js')}}"></script>
</head>
<body>
<h1>Classic editor</h1>
<textarea id="editor" rows="4">
</textarea>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
This is how i Initialize CK Editor 5 this doesn't upload Image, So I have try some snippet from Stack for Custom Image Upload Adapter. Here it is
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="{{adminAssets('plugins/jquery/jquery.min.js')}}"></script>
<script src="{{adminAssets('plugins/parsley/parsley.min.js')}}"></script>
<script src="{{adminAssets('plugins/ckeditor5-build-classic/ckeditor.js')}}"></script>
</head>
<body>
<h1>Classic editor</h1>
<textarea id="editor" rows="4">
</textarea>
<input type="hidden" value="{{url('/')}}" id="url" name="url">
<script>
var base_path = $('#url').val();
var uploadPath = "/storage/app/public";
var uploadUrl = base_path + uploadPath;
console.log(uploadUrl);
class MyUploadAdapter {
constructor(loader) {
// CKEditor 5's FileLoader instance.
this.loader = loader;
// URL where to send files.
this.url = uploadUrl
}
// Starts the upload process.
upload() {
return new Promise((resolve, reject) => {
this._initRequest();
this._initListeners(resolve, reject);
this._sendRequest();
});
}
// Aborts the upload process.
abort() {
if (this.xhr) {
this.xhr.abort();
}
}
// Example implementation using XMLHttpRequest.
_initRequest() {
const xhr = this.xhr = new XMLHttpRequest();
xhr.open('POST', this.url, true);
xhr.responseType = 'json';
}
// Initializes XMLHttpRequest listeners.
_initListeners(resolve, reject) {
const xhr = this.xhr;
const loader = this.loader;
const genericErrorText = 'Couldn't upload file:' + ` ${ loader.file.name }.`;
xhr.addEventListener('error', () => reject(genericErrorText));
xhr.addEventListener('abort', () => reject());
xhr.addEventListener('load', () => {
const response = xhr.response;
if (!response || response.error) {
return reject(response && response.error ? response.error.message : genericErrorText);
}
// If the upload is successful, resolve the upload promise with an object containing
// at least the "default" URL, pointing to the image on the server.
resolve({
default: response.url
});
});
if (xhr.upload) {
xhr.upload.addEventListener('progress', evt => {
if (evt.lengthComputable) {
loader.uploadTotal = evt.total;
loader.uploaded = evt.loaded;
}
});
}
}
// Prepares the data and sends the request.
_sendRequest() {
const data = new FormData();
data.append('upload', this.loader.file);
this.xhr.send(data);
}
}
function MyCustomUploadAdapterPlugin(editor) {
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
return new MyUploadAdapter(loader);
};
}
ClassicEditor
.create(document.querySelector('#editor'), {
extraPlugins: [MyCustomUploadAdapterPlugin],
// ...
})
.catch(error => {
console.log(error);
});
</script>
</body>
</html>
it gives me Image Preview for a second but denies to upload. I did'nt make this Adapter myself. i copied from stack. Please Suggest me how to modifiy this or Any Good Approach for Image Adapter using the PHP for CK Editor
