getData() wrong response right after image dropped

[csimpi]

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.

1. 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.
2. 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]

@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]

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]

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

1. Go to https://sdk.ckeditor.com/samples/fileupload.html.
2. Paste the following code into browser console:

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

3. 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]

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]

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

[nosus]

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

[einsteinreloaded]

Is this issue being resolved? Have the same problem when i am trying to getdata in onchange event

[rrg92]

I submitted new pull request to fix this.

For these want need resolve, just copy the plugin code, create a new plugin and change this line:

After that, you can ue editor.on('change') to get updated data.

[aashrith]

...