在 ckeditor5 中提交時圖像 src 丟失

Question

我在 ckeditor5 在線文檔之后使用了簡單的自定義 MyUploadAdapter。

圖像從復制粘貼和文件上傳對話框中顯示，並上傳到服務器。 但是一旦點擊保存textarea內容到我的服務器，圖片src是空的，如圖：

<figure class="image"><img></figure>

<figure class="image"><img src="" alt="16 Days of Activism | The Rose Campaign - Women in Crisis"></figure>

我正在使用的庫： https://cdn.ckeditor.com/ckeditor5/19.0.0/classic/ckeditor.js

以下是代碼：

function synchValues()
{
/*
    for(var instanceName in CKEDITOR.instances)
        CKEDITOR.instances[instanceName].updateElement();
CKEDITOR.on('instanceReady', function(){
   $.each( CKEDITOR.instances, function(instance) {
    CKEDITOR.instances[instance].on("change", function(e) {
        for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();
    });
   });
});


    document.getElementById('editor').value = editor.getData();
*/



$('textarea.editor').each(function () {
   var $textarea = $(this);
   $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
});


    return true;
}



function MyCustomUploadAdapterPlugin( editor ) {

    editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
        // Configure the URL to the upload script in your back-end here!
        return new MyUploadAdapter( loader );
    };
}

let editor;

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        extraPlugins: [ MyCustomUploadAdapterPlugin ],


        styles: [
            // This option is equal to a situation where no style is applied.
            'full',

            'side',

            // This represents an image aligned to the left.
            'alignLeft',

            'alignCenter',

            // This represents an image aligned to the right.
            'alignRight'
        ],

        image: {
            upload:  {
                types: ['jpeg', 'jpg', 'png', 'gif', 'bmp', 'webp', 'tiff', 'mp3', 'mp4', 'm4v', 'm4a', 'm1v', 'm2v', 'mp2', 'mpa', 'mpe', 'mpeg', 'mpg', 'mpv2', 'wav', 'pdf']
                // Image upload feature options.
            }
        }
    } )
    .then( newEditor => {
        console.log( 'Editor was initialized', newEditor );
        editor = newEditor;
    } )
    .catch( error => {
        console.log( error );
    } );

Here is the upload class:

class MyUploadAdapter {
    constructor( loader ) {
        // The file loader instance to use during the upload.
        this.loader = loader;
    }


    // Initializes the XMLHttpRequest object using the URL passed to the constructor.
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();

        // Note that your request may look different. It is up to you and your editor
        // integration to choose the right communication channel. This example uses
        // a POST request with JSON as a data structure but your configuration
        // could be different.
        xhr.open( 'POST', 'http://...../uploadc.php', 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', () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    const response = xhr.response;
                    if ( response && (response.url || response.urls) ) {
                        resolve( response.url ? { default: response.url } : response.urls );
                    } else if ( response && response.error ) {
                        return reject( response.error.message );
                    } else {
                        resolve( response.url ? { default: response.url } : response.urls );
                    }

                } else {
                    return reject( genericErrorText );
                }
            }


        } );

        // Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded
        // properties which are used e.g. to display the upload progress bar in the editor
        // user interface.
        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 );

        // Important note: This is the right place to implement security mechanisms
        // like authentication and CSRF protection. For instance, you can use
        // XMLHttpRequest.setRequestHeader() to set the request headers containing
        // the CSRF token generated earlier by your application.

        // Send the request.
        this.xhr.send( data );
    }



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

}

Answer 1

對不起，代碼沒有問題。 此問題是由服務器端數據不干凈引起的：

它只允許注冊用戶進行此文件上傳，這會導致響應中出現一些不可見的內容，因此 xmlhttprequest 無法正確處理。

我使用 ob_end_clean() 來丟棄緩存的數據，它現在可以工作了

謝謝

Answer 2

我覺得你應該試試。

ClassicEditor.create( document.querySelector( '#Content' ), {
        
    } )
        .then( editor => {
            window.editor = editor;

            editor.editing.view.document.on( 'keyup', ( evt, data ) => {
            //console.log( `You typed : ${ editor.getData()}` );               
            } );


            editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
                // Configure the URL to the upload script in your back-end here!
                return new MyUploadAdapter( loader );
        };

        
        editor.editing.view.document.on( 'change:isFocused', ( evt, data, isFocused ) => {
            //console.log( `View document is focused: ${ data }.` );
        } );

        //console.log( 'Editor was initialized', editor );
        } )
                .catch( error => {
                    console.error( error.stack );
        } );

你的MyUploadAdapter

   class MyUploadAdapter {
    constructor( loader ) {
        // The file loader instance to use during the upload.
        this.loader = loader;
    }


    // Initializes the XMLHttpRequest object using the URL passed to the constructor.
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();

        // Note that your request may look different. It is up to you and your editor
        // integration to choose the right communication channel. This example uses
        // a POST request with JSON as a data structure but your configuration
        // could be different.
        xhr.open( 'POST', 'http://...../uploadc.php', 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', () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    const response = xhr.response;
                    if ( response && (response.url || response.urls) ) {
                        resolve( response.url ? { default: response.url } : response.urls );
                    } else if ( response && response.error ) {
                        return reject( response.error.message );
                    } else {
                        resolve( response.url ? { default: response.url } : response.urls );
                    }

                } else {
                    return reject( genericErrorText );
                }
            }


        } );

        // Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded
        // properties which are used e.g. to display the upload progress bar in the editor
        // user interface.
        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 );

        // Important note: This is the right place to implement security mechanisms
        // like authentication and CSRF protection. For instance, you can use
        // XMLHttpRequest.setRequestHeader() to set the request headers containing
        // the CSRF token generated earlier by your application.

        // Send the request.
        this.xhr.send( data );
    }



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

}

Answer 3

是的，你是對的。 它只允許注冊用戶進行此文件上傳。 如果你在服務器上上傳圖片，那么你應該寫一個 function 來上傳圖片。 像這樣，

我們用C#語言編寫此代碼。

[Authorize, HttpPost]
public ActionResult UploadImage()
{
    private string filepath = string.Empty;
    private string server = string.Empty;
    private HttpPostedFileBase file = null;
    if (Request.Files.Count > 0)
    {
        file = Request.Files[0];
        if (!Directory.Exists(string.Format(System.Web.HttpContext.Current.Server.MapPath("~/UploadedImage"))))
        {
            Directory.CreateDirectory(string.Format(System.Web.HttpContext.Current.Server.MapPath("~/UploadedImage")));
        }

        server = string.Format(System.Web.HttpContext.Current.Server.MapPath("~/UploadedImage/{0}"), file.FileName);
        file.SaveAs(server);
    }

    filepath = string.Format("/UploadedImage/{0}", file.FileName);

    return Json(new { url = filepath});
}