M
M
Mikhail Smirnov2021-04-05 11:56:48
CKEditor
Mikhail Smirnov, 2021-04-05 11:56:48

Vue js how to load images in ckeditor?

The problem with uploading images
tried options from the ckeditor site and different options from the Internet, but it still doesn’t work to upload

uploadadapter.js

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


import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

    import UploadAdapter from '../../../uploadAdapter'

    export default {
        name: "ElementEdit",
        data: () => {
            return {
                tab: 0,
                
                editor: ClassicEditor,
                editorData: '',
                editorConfig: {
              
                    extraPlugins: [this.uploader]
                }
            }
        },
        components: {Breadcrumbs, PropertyValueEdit},
       
        methods: {
            uploader(editor)
            {
                editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
                    return new UploadAdapter( loader );
                };
            },
           
        },
    }


When I try to upload an image, I get an error:
CKEditorError: plugincollection-plugin-not-found {}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question