VueJS CKeditor5 télécharger des images

Question

Avoir des problèmes avec le téléchargement d'images à l'aide de CKeditor5 dans Vuejs.

J'ai d'abord essayé Adaptateur de téléchargement simple qui m'a donné l'erreur suivante:

Raison: CKEditorError: ckeditor-duplicated-modules: Certains modules CKEditor 5 sont dupliqués. En savoir plus: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

J'ai essayé de créer un adaptateur de téléchargement. En tant qu'adaptateur de téléchargement, j'ai pris le exemple et modifié l'url. Le fichier uploadadapter.js ressemble à ce qui suit:

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 );
    }
}

Le composant 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>

Cependant, chaque fois que vous essayez de télécharger un fichier, l'avertissement suivant est renvoyé:

filerepository-no-upload-adapter: l'adaptateur de téléchargement n'est pas défini. En savoir plus: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

J'ai regardé l'url, mais elle m'envoie juste en rond et ne fait donc aucun progrès. Ce que je recherche, c'est un exemple qui envoie au moins un fichier au serveur sans erreurs/avertissements. Si l'adaptateur de téléchargement peut être mis au rebut et que quelque chose d'autre que CKfinder peut être utilisé, c'est très bien. Pour l'instant, je suppose que le problème est le plus susceptible d'être dans le composant Vue.

Answer 1

déplacer la fonction d'uploader vers l'extérieur du composant vue) puis l'utiliser directement comme

extraPlugin: [uploader]

travaillé pour moi.