如何在 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 (将#修改为@）

ckeditor ckeditor ckeditor image-upload javascript laravel laravel