VueJS CKeditor5 上传图片 [英] VueJS CKeditor5 upload images

问题描述

在 Vuejs 中使用 CKeditor5 上传图片时遇到问题.

Having trouble with uploading images using CKeditor5 in Vuejs.

首先尝试了简单上传适配器 这给了我以下错误:

First having tried Simple upload Adapter which gave me the following error:

原因:CKEditorError:ckeditor-duplicated-modules:某些 CKEditor 5 模块重复.阅读更多:https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

Reason: CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

我尝试制作上传适配器.作为上传适配器，我采用了示例 并修改了网址.uploadadapter.js 文件如下所示:

I tried making a upload adapter. As a uploadadapter I took the example and modified the url. The uploadadapter.js file looks like the following:

    export default class UploadAdapter {
        constructor( loader ) {
            // The file loader instance to use during the upload.
            this.loader = loader;
        }
    
        // Starts the upload process.
        upload() {
            return this.loader.file
                .then( file => new Promise( ( resolve, reject ) => {
                    this._initRequest();
                    this._initListeners( resolve, reject, file );
                    this._sendRequest( file );
                } ) );
        }
    
        // Aborts the upload process.
        abort() {
            if ( this.xhr ) {
                this.xhr.abort();
            }
        }
    
        // Initializes the XMLHttpRequest object using the URL passed to the constructor.
        _initRequest() {
            const xhr = this.xhr = new XMLHttpRequest();
    
            xhr.open( 'POST', '<url here>', true );
            xhr.responseType = 'json';
        }
    
        // Initializes XMLHttpRequest listeners.
        _initListeners( resolve, reject, file ) {
            const xhr = this.xhr;
            const loader = this.loader;
            const genericErrorText = `Couldn't upload file: ${ 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 );
                }
   
                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( file ) {
            // Prepare the form data.
            const data = new FormData();
    
            data.append( 'upload', file );
    
            // Send the request.
            this.xhr.send( data );
        }
    }

Vue 组件:

    <template>
        <form @submit.prevent="store">
            <ckeditor
                :editor="editor"
                v-model="form.content"
                :error-messages="errors.content"
                :config="editorConfig"
            />
        </form>
    </template>
    
    <script>
        import CKEditor from '@ckeditor/ckeditor5-vue';
        import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
        import UploadAdapter from '../../UploadAdapter';
    
        export default {
            data()
            {
                return {
                    form: {
                        content: null,
                    },
                    editor: ClassicEditor,
                    editorConfig: {
                        toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'insertTable', '|', 'imageUpload', 'mediaEmbed', '|', 'undo', 'redo' ],
                        table: {
                            toolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
                        },
                        extraPlugin: [this.uploader],
                        language: 'nl',
                    },
                }
            },
    
            methods: {
                store()
                {
                    // Some code
                },
    
                uploader(editor)
                {
                    editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
                        return new UploadAdapter( loader );
                    };
                },
            },
    
            components: {
                ckeditor: CKEditor.component
            }
        }
    </script>

但是每次尝试上传文件时都会返回以下警告:

However each time when trying to upload a file the following warning is returned:

filerepository-no-upload-adapter:上传适配器未定义.阅读更多:https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

filerepository-no-upload-adapter: Upload adapter is not defined. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

查看了 url，但它只是让我转圈，因此没有任何进展.我正在寻找的是一个至少将文件发送到服务器而没有错误/警告的示例.如果上传适配器可以刮取并且可以使用除 CKfinder 之外的其他东西，那很好.目前我猜问题很可能出在 Vue 组件中.

Have looked at the url but it just sends me in circles thus making no progress. What I'm looking for is an example that at least sends a file to the server without errors/ warnings. If the uploadadapter can be scraped and something else except CKfinder can be used that's fine. For now I guess the problem is most likely to be in the Vue component.

推荐答案

使用 extraPlugins 而不是 extraPlugin.

这篇关于VueJS CKeditor5 上传图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！