如何解决如何在 PHP Laravel 中为 CK EDITOR 5 制作自定义图片上传适配器
<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>
这就是我初始化 CK Editor 5 的方式,它不上传图像,所以我尝试了 Stack 中的一些片段,用于自定义图像上传适配器。 在这里
<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>
它给了我一秒钟的图像预览,但拒绝上传。 我没有自己制作这个适配器。我从堆栈复制。 请建议我如何修改这个或任何使用 PHP 的图像适配器的好方法 CK 编辑器
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。