getData() wrong response right after image dropped

csimpi commented 6 years ago

Are you reporting a feature request or a bug?

Bug

[Check if the issue is already reported]

I've searched for hours

Provide detailed reproduction steps (if any)

User drops image to the editor, the image uploading successfully, the image tag is missing from the getData() response.

Drop image to the editor --> Upload successful, the image is appearing in the editor, the image's URL changing to the uploaded image's URL.
editor.getData() will print the content without the inserted image tag some reason. The complete

<img src="pathtotheimage"> html tag is missing from the getData() returned value. The rest part of content is okay, only the last dropped image's html tag is missing.

If I drop an image to the editor, then I change anything in the editor, this issue disappears. I suppose ckeditor forget to update something after the successful image uploading.

I tried fire change,saveSnapshot,key events after 'fileUploadResponse' event and before getData() function, without any luck.

Expected result

getData() function should return with the real content of ckeditor after image dropped

Actual result

It returns without image

Other details

Browser: All (tested on Chrome and Firefox)
OS: All
CKEditor version: latest (4.8.0)
Installed CKEditor plugins: extraPlugins = 'sourcedialog,jsplus_image_editor,filebrowser,uploadimage'

f1ames commented 6 years ago

@csimpi I was unable to reproduce this issue on clear a CKEditor instance (without 3rd-party plugins). Could you check on your side if issue occurs without jsplus_image_editor plugin?

csimpi commented 6 years ago

I can't do it because my question happened 23 days ago, I don't even remember how I solved this issue. As I remember I'm simulating some click event after inserting that updates the editor, then the inserted content appears in the getData() response.

I think you should try with or without that plugin to see the problem. Did you try to reproduce my issue the same way? Are you getting data right after the fileUploadResponse callback event?

f1ames commented 6 years ago

@csimpi Thanks for the clarification, I was able to reproduce the issue:

Go to https://sdk.ckeditor.com/samples/fileupload.html.

Paste the following code into browser console:

CKEDITOR.instances.editor1.on( 'fileUploadResponse', function( evt ) { console.log( evt.editor.getData() ) } );

Drop image into first editor.

Expected result

The getData() function should return full content of CKEditor after image dropped.

Actual result

It returns content without image tag.

Doesn't work with image plugin, works fine with image2.

Workaround

The easiest way to workaround the issue is to defer getData() execution like:

editor.on( 'fileUploadResponse', function( evt ) { 
    setTimeout( function() {
        console.log( evt.editor.getData() );
    } );
} );

csimpi commented 6 years ago

Thank you, I've solved this issue the same way, I added some timeout. But I think this is only a patch, it would need a real fix. UPDATE: I can see that this has labeled as a bug. Ty

f1ames commented 6 years ago

Thanks for feedback @csimpi. Yes, I will reopen the issue, so we may think of fixing it properly.

nosus commented 5 years ago

I find if you register your listener to the change event of editor instance, it does NOT get triggered after the <img tag is inserted.. And I think this is the real issue and not able to get the <img tag in the fileUploadResponse callback actually makes sense.

the callback is supposed to allow you get the response and transform it to the format that the plugin expects and give it back to editor instance, which means when it get here, the data from the server has not being inserted into the content area yet.

For example, I could have code like this

editor.on( 'fileUploadResponse', function( evt ) {
    // Prevent the default response handler.
    evt.stop();
    <---- at here, I don't think the image tag should have been inserted because I could change it later
    // Get XHR and response.
    var data = evt.data,
        xhr = data.fileLoader.xhr,
        response = JSON.parse(xhr.responseText).imageUrl;
         data.url = response

} );